mat-input attr.disable 未获取初始值

Question

我正在尝试 enable/disable mat-inputs 基于对象的属性的值。

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

在我看来，我有一个显示应用程序的 table 和每行一对 mat-inputs 应该启用或禁用取决于application.disabled 标志，由 mat-checkbox (click) 事件驱动。

我的问题是，在填充我的 table 后，垫输入的 none 被禁用，并且只有在复选框被选中一次并取消选中后才会被禁用，然后行行为正常。

如何让我的默认禁用状态传播到所有字段，同时根据我对象的禁用属性值保持 enabling/disabling 的功能？

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"

mat-input attr.disable 未获取初始值

mat-input attr.disable not picking up initial value

attributes

disabled-input

angular