在 Angular 中将数组项绑定到 [(value)]答案

【问题标题】：Bind Array Item to [(value)] in Angular在 Angular 中将数组项绑定到 [(value)]
【发布时间】：2018-07-03 13:03:14
【问题描述】：

您好，我正在使用 Angular 材料，我有一个产品数组，可以在我的模板中创建一个表格

 <tbody>
    <tr *ngFor="let item of productArray | async; let i = index">

在这个循环中，我在<th> 标签上有另一个循环：

<th>
   <mat-form-field>
      <mat-select placeholder="Length" formControlName="lengthOption" [compareWith]="compareWith" [(value)]="item.lengthOption">
         <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
              {{lengthOption.name}}
         </mat-option>
      </mat-select>
   </mat-form-field>

我想使用[(value)]的双向绑定。

我知道我可以将[value] 设置为例如lengthOption.name，然后将绑定设置为[(Value)]="selected"，然后我可以在我的组件(selected = whatever) 中设置它或通过{{selected}} 在模板中查看它。

我的查询是我可以从父数组中获取这个值，就像我在内部循环中尝试的那样：

*ngFor="let item of productArray | async; let i = index"

[(value)]="item.lengthOption"

productArray 上确实存在lengthOption。

我想为每个产品 mat-select 设置一个初始选定值。

lengthOption 看起来像{ "id": 1, "name": "Ten Years" }

所以我试图将对象设置为父数组中的 mat-option，而不仅仅是其自身数组中的对象值。

提前致谢。

【问题讨论】：

你能把你所有的 ts 和 html 文件代码放上来，这样对理解问题更有帮助。
有些像 productArray.forEach(item=>{item.lengthOption=item.lengthOptions[0]})？

标签： angular material-ui

【解决方案1】：

您可以为项目（选定的）添加一个新属性并在 ngModelChange 上更改它

 <mat-select placeholder="Length" formControlName="lengthOption" (ngModelChange)="select($event, item)" [compareWith]="compareWith" [(value)]="item.lengthOption">
     <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
        ...

每次你选择一个新的时尝试这样的改变：

select(selectedValue, item) {
 item['selectedLengthOption'] = selectedValue;
}

您可以在循环内的模板中访问它

{{item.selectedLengthOption}}

【讨论】：

【解决方案2】：

不建议使用动态名称进行双向绑定，并且它不能按预期方式工作。将此 [(value)] 视为 [(ngModel)]

您可以使用 (onChange) 或者如果您确实需要获取所有表单状态/信息，并且如果您的产品数组有更多项目，请尝试使用 formArray 它将让您的生活变得轻松。 https://angular.io/api/forms/FormArray

【讨论】：