Angular 2 Как динамически привязать флажок и вернуть идентификаторы отмеченных флажков при нажатии кнопки «Отправить»

Question

У меня есть данные JSON, как показано ниже,

[  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
]

Теперь мне нужно динамически связать флажок для данных «разрешения», и в HTML есть кнопка «Отправить», и когда я нажимаю кнопку «Отправить», мне нужны все идентификаторы applicationId, которые отмечены в массив.

Как мне добиться этого в Angular?

Answer 1

Полагаю, вам нужно иметь столько же флажков, сколько длина массива.

Вы можете выполнить итерацию списка с помощью ngFor и сохранить состояние выбранных элементов в отдельном массиве.

  checked = [];

  data = [  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
  ];

  checkItem(item) {
    const idx = this.checked.indexOf(item);
    idx >= 0 ? this.checked.splice(idx, 1) : this.checked.push(item);
  }

  submitData() {
    const applicationIds = this.checked.map(it => it.applicationId);
    console.log(applicationIds);
  }

и шаблон будет что-то вроде

<ul>
  <li *ngFor="let item of data">
    {{item.permissions}} <input type="checkbox" (change)="checkItem(item)">
  </li>
</ul>

<button type="button" (click)="submitData()">Submit</button>