mat-input attr.disable не принимает начальное значение - PullRequest
Новая
       33

mat-input attr.disable не принимает начальное значение

0 голосов
/ 28 марта 2019

Я пытаюсь включить / отключить mat-inputs на основе значения свойства объекта.

В моем компоненте я подписываюсь на observable в моемсервис, который будет возвращать все мои приложения с установленным по умолчанию флажком true, сигнализирующим, что мои поля должны быть отключены.Я успешно получаю свои приложения без проблем.

На мой взгляд , у меня есть таблица, в которой отображаются приложения, и пара mat-inputs на строку, которая должна быть включена или отключена в зависимости отфлаг application.disabled, который определяется событием mat-checkbox (click).

Моя проблема заключается в том, что после заполнения моей таблицы ни один из входных матов не отключается и становится отключенным только после того, как флажок установленпроверенный один раз и не отмеченный, тогда строка ведет себя нормально.

Как мне заставить мое отключенное состояние по умолчанию распространяться на все поля, но также поддерживать функциональность включения / выключения на основе значения свойства моего объекта отключенного?

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

1 Ответ

1 голос
/ 28 марта 2019

используйте его напрямую 

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