Как нам установить значение по умолчанию для выбора мата при его первой загрузке, например, у меня есть меню выбора с флажком ниже, когда он загружается, я хочу, чтобы тип транзакции неактивный был проверен и выбран по умолчанию. Спасибо за любые идеи и помощь.
По умолчанию в поле формы типа транзакции должно быть выбрано Idle Disposition.
this.filters.transactionType value
[
{
"id": 3,
"name": "Idle Disposition"
}
]
html code
<div class="report-select-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Transaction Type</mat-label>
<mat-select
multiple
#selectElemTransactionTypes
[(value)]="reportFilter.transactionType"
(selectionChange)="changeFilter('transactionType',selectAllTransactionTypes)"> `
<div class="idle-report-select-all-container">
<mat-checkbox
#selectAllTransactionTypes
color="primary"
(click)="toggleAllSelectionFilter('transactionType',selectElemTransactionTypes, selectAllTransactionTypes)">
Select All
</mat-checkbox>
</div>
<mat-option *ngFor="let f of filters.transactionType" [value]="f.name">
{{f.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
.tscode
changeFilter(filterName:string, selectAll: MatCheckbox){
this.isAllSelected[filterName] = (this.reportFilter[filterName].length === this.filters[filterName].length);
this.payloadFilter[filterName] = JSON.stringify(this.reportFilter[filterName]);
selectAll.checked = this.isAllSelected[filterName];
}
toggleAllSelectionFilter(selectProp: string, selectElem:MatSelect, selectAll: MatCheckbox) {
let isSelectAllSelected = this.isAllSelected[selectProp];
const checkSelAllOption = !isSelectAllSelected;
selectElem.options.forEach((item: MatOption) => (checkSelAllOption)? item.select(): item.deselect());
this.isAllSelected[selectProp] = checkSelAllOption;
setTimeout(()=>{
selectAll.checked = checkSelAllOption;
},0)
}
2 ответа
Честно говоря, я не вижу, где в вашем шаблоне стоит флажок «Idle Disposition».
Но мы можем использовать (checked), чтобы проверить это. https://material.angular.io/components/checkbox/api
@Input()
checked: boolean
Добавление этого в ваш шаблон должно работать.
<mat-checkbox
(checked)="filters.transactionType['name'] == 'Idle Disposition'">
</mat-checkbox>
Я бы предложил ввести какое-то другое свойство, по которому вы оцениваете, проверено ли состояние по умолчанию или нет.
{
"id": 3,
"name": "Idle Disposition",
checked: true
}
После того, как вы использовали бы его так:
<mat-checkbox
(checked)="filters.transactionType.checked">
</mat-checkbox>
checked логического типа, вы сможете использовать его следующим образом: (checked)="filters.transactionType.checked"
Вы должны добавить [(ngModel)] к вашему mat-select. Давайте назовем его selectedTransaction.
Затем в вашем компоненте .ts вы должны инициализировать selectedTransaction со значением по умолчанию, которое вы хотите иметь. Который:
{
"id": 3,
"name": "Idle Disposition"
}
Затем в вашем HTML, где у вас есть mat-select, у него есть другое свойство, называемое compareWith, которое вы можете назначить ему, чтобы сравнить выбранное значение со значениями, доступными в мат-выборе. Если ваши критерии соответствуют этому выбранному значению, оно будет отображаться, поэтому как минимум ваш <mat-select> будет выглядеть так.
<mat-select
[(ngModel)]="selectedTransaction"
[compareWith]="compareSelectOptions" multiple>
И, наконец, в вашем компоненте .ts вы создаете функцию с именем compareSelectOptions, которая соответствует выбранному значению и значениям, доступным в mat-select.
compareSelectOptions(a: any, b: any) {
if (a !== undefined && b !== undefined) {
//Note the equation here can be changed depending upon what you are saving
return a.id === b.id
};
}
Stackblitz для минимального примера: https://stackblitz.com/edit/angular-ekw8us
selectedTransaction.
En Español