Angular 4 с использованием флажков с данными, которые не включают логические значения - PullRequest
Новая
       8

Angular 4 с использованием флажков с данными, которые не включают логические значения

0 голосов
/ 29 июня 2018

У меня есть API, который возвращает данные, которые мне нужно использовать с флажками. Если я пишу приложение Angular 4 и мои данные выглядят как код ниже: 

mydata = [{name: 'Clark Kent'}, {name 'Lois Lane'}];

и мой HTML выглядит так: 

<div class="members-container">
      <mat-card *ngFor="let member of mydata" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox>
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>

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

1 Ответ

0 голосов
/ 29 июня 2018

Используйте событие изменения для ведения собственного списка выбранного элемента. 

<div class="members-container">
      <mat-card *ngFor="let member of mydata" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox (value)="member.name" (change)="checked(option, $event)">
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>

TS / JS 

selectedValues = [];
function checked(option, $event) {
   if($event.checked) {
      selectedValues.push(option.value);
      //.. unselect etc to be implemented....
   }
}

Но: Выбранное поле ИМХО является более чистым подходом, и я не стал бы беспокоиться о стоимости этих микросекунд для отображения.

Лучший подход: отделить GUI-данные от API-Data Вы можете создать новый список параметров, основанный на входных данных из вашего API, только со свойствами, необходимыми для отображения, а также выбранного поля. При таком подходе вы будете отделять данные от вашего графического интерфейса и сможете использовать выбранное поле.

Получить список ваших данных для графического интерфейса TS / JS 

myDataForGui = mydata.map(m => {name: m.name, selected: false });

HTML 

<div class="members-container">
      <mat-card *ngFor="let member of myDataForGui" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox (checked)="member.selected">
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>
...