mat-input attr.disable没有获取初始值

Question

我正在尝试根据对象属性的值启用/禁用mat-inputs。

在我的组件中，我在我的服务中订阅了observable，它将返回我的所有应用程序，默认情况下禁用标志设置为true，表示我的字段应该被禁用。我成功地获得了我的应用程序没有问题。

在我看来，我有一个显示应用程序的表和每行几个mat-inputs，应根据application.disabled事件驱动的mat-checkbox (click)标志启用或禁用。

我的问题是，在填充我的表时，没有任何mat输入被禁用，只有在选中一个复选框并且未选中后才会被禁用，然后该行正常运行。

如何使我的默认禁用状态在所有字段中传播，同时还根据对象的已禁用属性值维护启用/禁用功能？

application.viewmodel.ts

import { ApplicationDto } from '../models';

export class ApplicationViewModel {

    disabled: boolean;
    application: ApplicationDto;

    constructor(
        disabled?: boolean,
        application?: ApplicationDto
    ) {
        this.disabled = disabled || false;
        this.application = application || null;
    }
}

application.service.ts

export class ApplicationService {

    private currentApplicationsSubject = new BehaviorSubject<ApplicationViewModel[]>([]);

    get currentApplications$(): Observable<ApplicationViewModel[]> {
        return this.currentApplicationsSubject.asObservable();
    }

    constructor(private http: HttpClient) { }

    // Fetch all applications
    fetchApplications(): void {
        this.http.get<ResponseDto<CollectionDto<ApplicationDto>>>
            (location.origin + '/api/application').pipe(
            map((response: ResponseDto<CollectionDto<ApplicationDto>>) 
                => response.response.collection)
        ).subscribe(
            (dtos: ApplicationDto[]) => {
                let viewModels: ApplicationViewModel[] = [];
                dtos.forEach(dto => viewModels.push(new ApplicationViewModel(true, dto)));
                this.currentApplicationsSubject.next(viewModels);
            }
        );
    }
}

application.component.ts

// Datasource
dataSource = new MatTableDataSource<ApplicationViewModel>();

// Get and set currentApplications BehaviorSubject from web request
this.applicationService.fetchApplications();

// Observable subscription
this.service.currentApplications$.subscribe(
    (applications: ApplicationViewModel[]) => this.dataSource.data = applications
);

// Disabled state changer
changeRowState(application: ApplicationViewModel) {
    application.disabled = !application.disabled;
}

application.component.html

<table mat-table fxFlex="grow" [dataSource]="dataSource">
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>Select</th>
        <td mat-cell *matCellDef="let application">
            <mat-checkbox 
                (click)="$event.stopPropagation(); changeRowState(application);"
                (change)="$event ? selection.toggle(application) : null"
                [checked]="selection.isSelected(application)">
            </mat-checkbox>
        </td>
    </ng-container>
    <ng-container matColumnDef="field">
        <th mat-header-cell *matHeaderCellDef>Field</th>
        <td mat-cell *matCellDef="let application">
            <input 
                matInput 
                placeholder="Field" 
                [attr.disabled]="application?.disabled ? '' : null" 
                required />
        </td>
    </ng-container>
...

Answer 1

直接使用它

[disabled]="application?.disabled ? '' : null"