mat-table 重复数据数组的最后一项，而不是显示每个唯一的行答案

【问题标题】：mat-table is repeating last item of data array, rather than showing each unique rowmat-table 重复数据数组的最后一项，而不是显示每个唯一的行
【发布时间】：2020-01-12 21:13:53
【问题描述】：

我使用matTable 来显示这些数据：

这是表格代码：

<mat-table #table style="overflow: hidden" [dataSource]="list">
    <ng-container matColumnDef="specifications">
        <th mat-header-cell *matHeaderCellDef> Specifications </th>
        <td mat-cell *matCellDef="let spec">
            <mat-form-field fxFlex>
                <textarea matInput name="specificationText" [(ngModel)]="spec.sortOrder"></textarea>
            </mat-form-field>
        </td>
    </ng-container>

    <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>
            <button mat-raised-button mat-icon-button (click)="addRate()">
                <mat-icon>add</mat-icon>
            </button>
        </th>
        <td mat-cell *matCellDef="let specification">
            0/250
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="['specifications', 'actions']"></tr>
    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
</mat-table>

和打字稿代码：

@Component({
    selector: 'build-activity-schedule',
    templateUrl: './build-activity-schedule.component.html',
    styleUrls: ['./build-activity-schedule.component.scss'],
    providers: [BuildActivitiesLogicService, UsersLogicService]
})
export class BuildActivityScheduleComponent implements OnInit {
    public formMode: FormMode;
    public buildActivityRequiredLevels: Array<SelectListItem>;
    @ViewChild(MatTable, undefined) public table1: MatTable<any>;
    @Input() public buildActivityId: number;
    public buildActivity: IBuildActivityMappedItem;
    public selectedProduct: ISkinnyOfferingDto;
    public list;
    public taskAnalysisFormRequired: boolean;
    public readonly tableColumns: string[] = [
        'specifications',
        'actions'
    ];

    constructor(
        public readonly navigationService: NavigationService,
        protected readonly authService: AuthService,
        private enumService: CbEnumService,
        public readonly currentUser: CurrentUserService,
        public readonly permissionsPermissions: PermissionsPermissions,
        public readonly dialog: MatDialog,
        private readonly buildActivitiesLogicService: BuildActivitiesLogicService
    ) {
        this.formMode = FormMode.View;
        this.buildActivityRequiredLevels =
            this.enumService.getSelectList(BuildActivityRequiredLevel);
    }

    public ngOnInit(): void {
        this.buildActivitiesLogicService
            .getItem(this.buildActivityId)
            .pipe(takeOne())
            .subscribe(x => {
                this.buildActivity = this.buildActivitiesLogicService
                    .$createMappedItem(BuildActivityMappedItem, x);
                this.list = this.buildActivity.getNationalSchedule().buildActivityScheduleSpecificationsLineItems;
                console.log(this.list);
            });
    }
}

表格显示4行，但表格的行都是数组的最后一项。 <textarea> 每行都有“4”。为什么它会重复最后一行 4 次，而不是只显示 4 个唯一的行？

【问题讨论】：

createMappedItem 和 getNationalSchedule 有问题，您这里没有这些代码
@joyBlanks 不，我控制台记录了用于数据源的列表。
是的，您的列表中有相同的项目重复了 4 次，并且您正在从上述 2 种方法获取数据
@joyBlanks 列表根据排序索引和文本有不同的项目
@BeniaminoBaggins 你不会在任何地方输出文本

标签： angular typescript angular-material material-design mat-table

【解决方案1】：

问题是您对行 textarea 使用相同的 ngModel name。因此，所有文本区域都绑定到单个表单控件，并且设置给该控件的最后一个值将应用于所有文本区域。尝试使用唯一的名称，例如：

<textarea matInput name="specificationText.{{spec.id}}" [(ngModel)]="spec.sortOrder"></textarea>

【讨论】：