Question

我的组件中有以下对象，我的模板使用它来渲染div：

this.myobj = {'machine':['parts':[
                            {'gears': [{'name': 'AName1'}, {'name': 'AName2'}]},
                            {'screws': [{'name': 'BName2'}, {'name': 'BName3'}]},
                            {'rotors': [{'name': 'CName5'}]},
                            {'shells': [{'name': 'CName2'}]}
             ]]}

我目前的代码是：

<button (click)="setPart('gears')">Gears</button>
<button (click)="setPart('screws')">Screws</button>
<button (click)="setPart('rotors')">Rotors</button>
<button (click)="setPart('shells')">Shells</button>

<div *ngFor="let part of machine[0]?.parts[1].gears;let i = index;" style="color:#FFF">
<div> {{part.name}}</div>
</div>

我的问题是我想做到这一点，以便我可以动态“改变”ngFor迭代不同的部分，并通过点击其中一个为其下的名称创建div（即'rotors'，'shells'）它上面有四个按钮。目前我拥有它的方式，它只硬编码到一个部分（'齿轮'）。

我真的不喜欢parts[1].gears的硬编码，因为我理想的是想在范围内使用变量来设置“1”和“齿轮”。或者这不可能在ngFor？

中有这样的变量

Answer 1

在您的组件中创建一个属性：

myPart: any;

将模板更改为：

<div *ngFor="let part of mypart;let i = index;" style="color:#FFF">
    <div>{{part.name}}</div>             
</div>

更改方法：

setPart(name: string){
    this.myPart = this.myobj.machine[0].parts[name];
}

如何使用AngularJS 2/4在ngFor循环中动态使用模型变量？

1 个答案: