Невозможно создать свойство selected для строки, используя ngModel с Angular

Question

, поэтому я пытаюсь использовать [(ngModel)] следующим образом:

  <div class="items">
    <tbody>
    <tr *ngFor="let account of this.accounts">
      <td>
          <input type="checkbox" [(ngModel)]="this.account.name.selected" name="account">
              {{account.name}}
      </td>
    </tr>
    </tbody>
  </div>

Мой accounts создан и заполнен в компоненте: accounts: Account[] = [];

Мой Account объект:

export class Account {
name: string;
surname: string;
}

Я получаю ERROR TypeError: Cannot create property 'selected' on string 'John'

Я видел эту тему: Невозможно создать свойство 'selected' в строке 'Information Technology' angularjs Но не совсем понял, как применить упомянутое исправление к моему делу, возможно, потому что я использую Angular, а не AngularJS. Был бы рад, если бы кто-нибудь мог помочь немного понять проблему здесь?

Answer 1

Похоже, вам нужно иметь свойство selected в вашем массиве. Поэтому, чтобы избежать загрязнения класса Account, вы можете использовать метод map:

let withSelectedProperty = this.accounts.map(s=> ({...s, selected: false}));

И HTML:

<tr *ngFor="let account of withSelectedProperty">
  <td>
      <input type="checkbox" [(ngModel)]="account.selected" name="account">
          {{account.name}}
  </td>
</tr>

ОБНОВЛЕНИЕ:

Вы можете использовать метод filter, чтобы получить все выбранные значения:

let onlySelected = this.withSelectedProperty.filter(f => f.selected);