mat-input 在 mat-table Angular 8 中无法正常工作

Posted 2023-03-13

【中文标题】mat-input 在 mat-table Angular 8 中无法正常工作

【英文标题】：mat-input not working properly in mat-table Angular 8

【发布时间】：2020-11-17 14:50:33

【问题描述】：

我在 mat-table 中遇到问题，我的输入字段在表格中无法正常工作。所有行都使用一个输入字段。表示如果我在输入框中输入文本，所有行都会显示该文本

我的代码：

<ng-container matColumnDef="Remarks">
    <mat-header-cell *matHeaderCellDef>scheduled hours</mat-header-cell>
    <mat-cell *matCellDef="let element">  
        <mat-form-field>
            <input matInput [(ngModel)]="Remarks" (input)="$event.target.value.length > 2 && Remarks($event.target.value)"  name="AppRemarks"  #AppRemarks="ngModel"  placeholder="Remarks"> &nbsp; &nbsp;
        </mat-form-field> 
    </mat-cell>
</ng-container>

【参考方案1】：

您好，这不是 mat 表的错，您用同一个变量制作了一个表，并且每一行对同一个变量都有两种方式绑定，这将导致每一行都具有相同的值。

为了实现您想要的，请查看 Angular Reactive formarrays。

这是一个很好的教程如何使用表单数组 https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a

【参考方案2】：

我也遇到过这个！最终成为name 属性使事情发生了变化。 name 用于唯一标识控件，因此当您对每个属性应用相同的名称时，它们都共享相同的标识符/键并被视为一个输入。

这应该可以解决您的问题（为简洁起见，省略了一些代码）：

<ng-container matColumnDef="Remarks">
    <mat-header-cell *matHeaderCellDef>scheduled hours</mat-header-cell>
    <mat-cell *matCellDef="let element; let i = index;">  
        <mat-form-field>
            <input matInput [(ngModel)]="Remarks" name="AppRemarks i ">
        </mat-form-field> 
    </mat-cell>
</ng-container>

【讨论】：

name 属性不是唯一的。 id 属性是唯一的。如果您在表单上有一个单选按钮组，则所有单选按钮输入都将具有相同的名称。

【参考方案3】：

它应该是[(ngModel)]="AppRemarks"，因为您的输入字段中有name= "AppRemarks"