我想使我的组件更可重用。在组件中,我使用ngModel绑定(bind)了两个值:elem.key和elem.value。问题是,无论我在哪里使用该组件,该元素都必须具有键和值属性,例如,来自Api的某些数据可能具有名称和昵称等。现在,我可以重复使用我的组件,但前提是值对象的关键是值(value)。我的代码:
的HTML:
<button (click)="addNew()">Add</button>
<div *ngFor="let elem of elements">
<text-input [(ngModel)]="elem.key" type="text"></text-input>
<text-input [(ngModel)]="elem.value" type="text"></text-input>
</div>
ts:
@Input() elements: any[];
addNew() {
this.elements.push({
key: '',
value: ''
});
}
如果我在另一个组件中使用组件:
<input-key-value [elements]="values">
如果我只需要添加到值数组{key:”,value:''},它就可以正常工作,但是有时我想添加例如{name:``,nickname:''},因为这种格式的数据必须是发送到服务器。
我尝试添加另一个输入名称输入,{键:“名称”,值:“名称”},并在html中:
<text-input [(ngModel)]="elem[inputs.key]" type="text"></text-input>
<text-input [(ngModel)]="elem.[inputs.value]" type="text"></text-input>
但这又将错误的数据推送到我的主阵列。
最佳答案
这对我有用。
输入键值模板:
<div *ngFor="let elem of elements">
<div *ngFor="let prop of keys(elem)" >
<text-input type="text" [(ngModel)]="elem[prop]"></text-input>
</div>
</div>
输入键值ts:
keys(element) {
return Object.keys(element);
}
根据对象具有多少个属性,它可以渲染尽可能多的文本框。希望这会有所帮助。