Итак, у меня есть таблица с двумя столбцами. Обе ячейки должны быть выделены перед включением кнопки отправки.
Изначально я сделал следующее:
<button class="submit" mat-raised-button color=primary [disabled]="submitButtonDisabled" mat-button (click)="onSubmit()">Submit</button>
Где submitButtonDisabled - логическое значение, которое в конечном итоге назначается (click) событиями на любом издве колонки. Вот так ..
<td mat-cell *matCellDef="let element; let i = index;" (click)="selectedA = element.A; valueChosen();" [ngClass]="{'highlight': selectedA == element.A}">{{element.A}}</td>
В файле TS:
checkValidInput() {
console.log("checkValidInput() called");
return this.selectedA != null && this.selectedB != null;}
И valueChosen () просто проверяет, выполнены ли правильные условия для включения кнопки отправки. IE
valueChosen() {
this.submitButtonDisabled = !this.checkValidInput();
}
Это работает нормально, однако коллега предложил, что я упрощаю логику, просто присваивая значение свойству кнопок [disabled] непосредственно из функции checkValidInput. Как и так
<button class="submit" mat-raised-button color=primary [disabled]="!checkValidInput()" mat-button (click)="onSubmit()">Submit</button>
Что работает ... НО, потому что ни одно событие не вызывало эту функцию, я не видел, как устанавливалось свойство disabled. Поэтому я добавил оператор console.log в функцию, и когда я открываю модуль, мое отладочное сообщение спамит мой терминал. Так что в этом случае я не выгляжу так, как будто Angular Mat просто постоянно опрашивает функцию и присваивает ее возвращаемое значение свойству [disabled] кнопки.
Вопрос 1: Может кто-нибудь объяснить, как Angular Mat обновляет эти атрибутыВопрос 2: Как правильно реализовать это (оба технически работают)? Вопрос 3: Если в качестве значения свойства [disabled] (как в первом подходе) присваивается логическая переменная, происходит ли этот опрос в фоновом режиме?