Как получить текущее состояние элемента MatSelect (Multiselect) в угловом материале

Я использую MatSelect с опцией множественного выбора. При проверке или снятии отметки с каждого элемента есть функция машинописного текста, которая будет вызываться каждый раз, поэтому проблема в том, что я не могу отличить, какое событие щелчка заполняется из пользовательского интерфейса, например. Apple проверила, затем вызвала API, и если Apple не проверила, ничего не делайте

.html файл

 <mat-form-field>
    <mat-select [(value)]="selected" formControlName="tagList" id="tagList" placeholder="Select Tag" name="tagList" multiple>
      <mat-option *ngFor="let tag of tagList" [value]="tag" 
         (click)="isSelectedTagIsCallback(tag, $event.value)">
         {{tag.name}}
      </mat-option>
    </mat-select>
 </mat-form-field>

.ts-файл

isSelectedTagIsCallback(data, event) {
      if(checked){
         // Call API
      }
     else{
       // Do nothing
     }
}

Является ли вышеуказанный подход неправильным или правильным? Если правильно, то как мне получить это событие Checked/Unchecked или флаг для вызова API на основе значения


material-design angular angular-material-5
person Prashant Pimpale    schedule 22.05.2018    source источник
comment
Что не работает в вашем текущем подходе?   -  person bugs    schedule 22.05.2018
comment
Каждый раз, когда вызов метода isSelectedTagIsCallback в порядке, но в этом методе я должен проверить, установлен или не отмечен элемент с множественным выбором   -  person Prashant Pimpale    schedule 22.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это, вам не нужно передавать значение параметра в функцию: В вашем машинописном тексте так:

selected: any = '';
isSelectedTagIsCallback() {
    if(this.selected!=''){
       alert(this.selected); //CALL API Here
    }else{
       // Do nothing
}

В вашем html, как вы разместили, замените isSelectedTagIsCallback(tag, $event.value) на isSelectedTagIsCallback() В функции вы можете получить несколько значений флажка, разделенных запятой.

вот рабочий пример: angular-multiple-value-selected-in-material

Надеюсь, что это поможет вам!

person Sanoj_V    schedule 22.05.2018
comment
Выбранный список выбранных тегов - person Prashant Pimpale; 22.05.2018
comment
да, там вы можете получить только значение выбранных или проверенных элементов. - person Sanoj_V; 22.05.2018
comment
Затем мне нужно перебрать массив и проверить условие, так ли это? - person Prashant Pimpale; 22.05.2018
comment
Можете ли вы сказать мне, какое состояние вы хотите проверить там ?? - person Sanoj_V; 22.05.2018
comment
Просто хочу проверить, присутствует ли текущее значение в списке (после вызова API). Я пробовал, позвольте мне проверить, хорошо ли это работает для всех случаев - person Prashant Pimpale; 22.05.2018
comment
В соответствии с бизнес-требованиями мне нужно обрабатывать более 3 условий и вариантов использования. - person Prashant Pimpale; 22.05.2018
comment
Выполняя сравнение между текущим значением и значением вызова API - person Prashant Pimpale; 22.05.2018
comment
Давайте продолжим это обсуждение в чате. - person Prashant Pimpale; 22.05.2018
comment
Если пользователь установит флажок только после того, как мой метод будет выполнен, в противном случае ничего не делать --> Ничего не делать при снятии флажка - person Prashant Pimpale; 22.05.2018
comment
Хорошо, но вы не можете получить значение флажка «Снять отметку». Итак, как вы будете проверять условие? - person Sanoj_V; 22.05.2018
comment
В моем коде функция называется isSelectedTagIsCallback, которая принимает ввод тега, поэтому он появляется при каждом щелчке (при проверке и при снятии отметки), чего я не хочу. - person Prashant Pimpale; 22.05.2018
comment
Ok. проверьте текущее значение tag, присутствующее в списке selected, или вы можете использовать фильтр. Если он присутствует, вызовите API, иначе ничего не делайте - person Sanoj_V; 22.05.2018
comment
Да, это то, что я пробовал, но не работает в одном случае - person Prashant Pimpale; 22.05.2018
comment
Вы уверены, что это isSelectedTagIsCallback(tag, $event.value) получает значение тега. - person Sanoj_V; 22.05.2018
comment
Да, конечно! - person Prashant Pimpale; 22.05.2018
comment
Позвольте мне объяснить-> Есть 4 варианта, такие как 1) Обратный вызов 2) Общие 3) Ответ API1 4) Ответ API2 в ddl на чеке. Я хочу взять имя тега из данных тега, после чего есть три условия: 1) имя тега равно обратному вызову --> Обратный вызов 2) Если нет, то имя тега существует в списке данных API --> Ответ API1, ответ API2 3) И ничего из вышеперечисленного --> Общие Для пунктов 1 и 2 он возвращает мне дату и для 3-го без даты - person Prashant Pimpale; 22.05.2018