Angular 模块化对象属性绑定到 ngModel

Question

我有一个具有 1 组属性和 X 模块化属性的对象，这些属性根据数组添加，数组元素是对象名称。 这非常适合在我的表格中显示元素。 当我想将文本框绑定到我的模型时，我的问题就出现了，因为我收到一条错误消息，指出对象属性不存在。 我已经包含了一个 *ngIf 来检查该属性是否存在，并且理论上它可以找到它。

这是我尝试使用模块化属性名称之一的 HTMl 代码的一部分，我使用了一个我知道将存在的名称来简化调试，下一步是将其更改为完全模块化：

<ng-container *ngIf="newWaste[0].hasOwnProperty('Metal')">
 <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns  | slice:2 let i = index">
  <th mat-header-cell *matHeaderCellDef>{{ displayedColumns[i+2] }}</th>
  <td mat-cell *matCellDef="let emp">
   <input type="text"  matInput placeholder="" value="{{ emp[column] }}" [(ngModel)]="newWaste[0].Metal" />
  </td>
 </ng-container>
</ng-container>

我也尝试过计算属性的数量，而不是直接检查它是否存在，也没有区别。

这是我的错误：

src/app/pages/waste/containers/waste-page/waste-page.component.html:33:132 - error TS2339: Property 'Metal' does not exist on type '{ measuredDate: Date; }'.

33                                     <input type="text"  matInput placeholder="" value="{{ emp[column] }}" [(ngModel)]="newWaste[0].Metal" />
                                                                                                                                      ~~~~~

  src/app/pages/waste/containers/waste-page/waste-page.component.ts:19:16
    19   templateUrl: './waste-page.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component WastePageComponent.

我使用 Date 参数创建对象，其余的稍后添加。 绑定到日期完美无缺。

有什么建议么？

Answer 1

我使用 Date 参数创建对象，其余的稍后添加

这就是问题所在。 使用已经存在的Metal属性初始化newWaste （如果它被初始化为undefined则没有问题），并且可能会调整newWaste的 TS 类型，因此Metal属性是非可选的。 指向可能不存在的属性的ngModel的 Angular 对象。

Answer 2

考虑到整个初始化问题，我尝试初始化一个空数组，而不是一个包含“measuredDate”属性的对象的数组。

所以代替这个：

public newWaste = [{measuredDate: Date}];

我只是使用它，并在代码中添加所有属性：

public newWaste = [];

ngOnInit(): void {
    //add the measureDate property
    this.newWaste.push({measuredDate: new Date()});
    //in other methods I add the more specific properties such as Metal
}

它以这样的方式完美运行。