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

问题描述

我正在使用 amatTable来显示这些数据：

这是表格代码：

<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 个唯一行？

标签： angulartypescriptangular-materialmaterial-designmat-table

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

问题描述

解决方案

推荐阅读