CODEWITHSUNDEEP
angulartypescriptangular-materialmaterial-designmat-table
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

mat-table is repeating last item of data array, rather than showing each unique row

I'm using a matTable to display this data: enter image description here

Here is the table code:

<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>

and the typescript code:

@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);
            });
    }
}

The table shows 4 rows, but the rows of the table are all the last item of the array. The <textarea> has "4" for each row. Why does it repeat the last row 4 times rather than just display the 4 unique rows?

Upvotes: 1

Views: 1359

Answers (1)

Valeriy Katkov
Valeriy Katkov

Reputation: 40522

The problem is that you are using the same ngModel name for the row textarea. As a result, all textareas are bound to a single form control and the last value that is set to the control is applied to them all. Try to use unique names, like:

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

Upvotes: 2

Related Questions