Question

我正在使用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个唯一行？

Answer 1

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

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

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

1 个答案: