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

По умолчанию в поле формы типа транзакции должно быть выбрано Idle Disposition.

enter image description here

enter image description here

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)    
  }
0
jun rey 4 Фев 2022 в 10:41
См. здесь: stackblitz.com/edit/…
 – 
Michael D
4 Фев 2022 в 11:32
stackblitz.com/edit/ … Вы можете сделать так. Спасибо
 – 
GRD
4 Фев 2022 в 11:37
У вас есть пример, сэр, на основе моего существующего кода?
 – 
jun rey
4 Фев 2022 в 12:04
@junrey, можете ли вы создать стек вашей проблемы (с фиктивными данными и т. Д.), Тогда я могу обновить ее, указав, как я ее решил в своем ответе. Какой чистый способ сделать это
 – 
HassanMoin
4 Фев 2022 в 12:15

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>
0
Joosep.P 4 Фев 2022 в 12:14
Следует добавить на мат-флажок, например Select All < /мат-флажок>?
 – 
jun rey
4 Фев 2022 в 11:59
Idle диспозиция из filter.transactionType
 – 
jun rey
4 Фев 2022 в 12:09
Если вы добавите новое свойство checked логического типа, вы сможете использовать его следующим образом: (checked)="filters.transactionType.checked"
 – 
Joosep.P
4 Фев 2022 в 12:13

Вы должны добавить [(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

0
HassanMoin 4 Фев 2022 в 13:50
У вас есть пример stackblitz с этим кодом, сэр?
 – 
jun rey
4 Фев 2022 в 12:45
Параметры выбора сравнения приведут к тому, что не все пути кода возвращают значение.
 – 
jun rey
4 Фев 2022 в 12:48
@junrey, я добавил stackblitz с минимальным кодом, необходимым для этого с вашим примером, большая часть кода в вашем коде мне неизвестна из-за меньшего количества деталей. Итак, я только что показал вам, как можно выбрать значение по умолчанию. Вы также можете добавить дополнительные значения по умолчанию, добавив дополнительные значения в массив selectedTransaction.
 – 
HassanMoin
4 Фев 2022 в 13:52