具有动态对象/属性的Angular 2- ngModel
具有动态对象/属性的Angular 2- ngModel
提问于 2016-11-22 11:57:35
在我的TS文件中，我动态地创建了selectedValsObj对象的属性，如下所示：
private selectValsObj: any = {};
setSelectedValsObj(sectionsArr) {
sectionsArr.forEach(section => {
section.questions.forEach(questionObj => {
if (questionObj.type === 'drop-down') {
this.selectValsObj[questionObj.questionId] = { selected: questionObj.answerDetails[0] };
}
})
});
}在我的超文本标记语言中，我希望将输入上的[ngModel]绑定到selectValsObj对象上的属性。我试过了，但没有成功：
<div *ngFor="let question of section.questions">
<div class="drop-down-question" *ngIf="question?.type === 'drop-down'">
<select class="q-select"
[(ngModel)]="selectValsObj[questionId].selected" // <== doesnt work either**
// [(ngModel)]="selectValsObj[{{ questionId }}].selected" // <== doesnt work**
name="answerForQuestion{{ question?.questionId }}">
<option *ngFor="let answer of question?.answerDetails"
[ngValue]="answer">
{{ answer?.value }}
</option>
</select>
</div>
</div>如何将超文本标记语言中的ngModel设置为TS文件中动态创建的属性？
回答 4
Stack Overflow用户
发布于 2018-03-26 01:20:04
我试图复制这种情况，但在代码中，您发布的似乎存在多个问题。
- 属性
selectValsObj被声明为private，但您试图在模板 - 中使用它在您试图迭代
section.questions的模板中，但我没有看到它在其他地方定义，而是在setSelectedValsObjmethod forEach local scope - 中，您可能因为缺少类型定义而错误地使用了数据
这是我所理解的代码，并添加了typedefs
interface QuestionModel {
type: string;
questionId: string;
answerDetails: string[];
}
const MOCK_DATA = [
{
questions: [{
type: 'drop-down',
questionId: '42',
answerDetails: ['wololo'],
}],
},
];
@Component(...)
export class ProductsComponent {
selectValsObj: { [key: string]: { selected: string } } = {};
constructor() {
this.setSelectedValsObj(MOCK_DATA);
}
setSelectedValsObj(sectionsArr: { questions: QuestionModel[] }[]) {
sectionsArr.forEach(section => {
section.questions.forEach(questionObj => {
if (questionObj.type === 'drop-down') {
this.selectValsObj[questionObj.questionId] = {selected: questionObj.answerDetails[0]};
}
});
});
}
}在检查了类型定义是否如您最初预期的那样(并正确使用它)之后，您将避免许多bug。
此外，考虑使用更具声明性的方法，在方法中使用map和filter而不是forEach。
Stack Overflow用户
发布于 2018-03-30 22:51:17
对于您的HTML代码中的以下行：
[(ngModel)]="selectValsObj[questionId].selected"如果您没有将questionId定义为在ts文件中的任何位置都有值的变量，那么这可能就是问题所在。
如果您想要获取正在循环的section.questions列表中每个question的questionId，可以尝试如下所示：
[(ngModel)]="selectValsObj[question.questionId].selected"我已经做了一个简单的例子，你可以在不同的工作情况下找到它(在src/app.ts中)。我希望它能有所帮助。
Stack Overflow用户
发布于 2018-09-24 13:41:08
(click)="toggle(address.id)"
*ngIf="action[address.id]"在ts文件中：
action: any = {};在切换方法中，
this.action[addressId] = !this.action[addressId];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40733528
复制相关文章
相似问题
腾讯云开发者
