Angular - логическое значение не меняется

Question

У меня проблема с моим приложением. Я пытаюсь создать список флажков, когда флажок установлен, значение должно быть истинным, а при повторном щелчке значение должно быть ложным. Просто.

Вот мой html

  <li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" name ="{{checkbox.inputName}}" 
                [checked]="checkbox.name"
                (change)="checkbox.name= !checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>

Вот мой component.ts

showFirstName = true;
showLastName = true;

checkboxSelect: any[] = [{
        label: 'First name',
        name: this.showFirstName,
        inputName: 'showFirstName'
    }, {
        label: 'Last name',
        name: this.showLastName,
        inputName: 'showLastName'

    },
];

Все работает, за исключением того, что мое значение 'name' не меняется на true / false при нажатии.

С другой стороны, когда я помещаю это прямо в html без * ng, потому что он работает

  <li>
      <div class="checkbox-style">
          <input type="checkbox" name = "firstName"
                [checked]="showFirstName"
                (change)="showFirstName = !showFirstName"/>
             <div class="state">
                 <label>First Name</label>
             </div>
      </div>
  </li>

, я не был так ясен, моя цель - отображение div зависит от true / false

 <div *ngIf="showFirstName" scope="col">First name</div>
<div *ngIf="showLastName" scope="col">Second name</div>

Но это не меняется вообще.

Кто-нибудь знает, что не так с моим кодом?

Answer 1

На основании вашего комментария вы пытаетесь использовать переменные showFirstName и showLastName, которые не изменяются обработчиком событий, чтобы отображать / скрывать строки First Name и Last Name. Чтобы привязка значений сохранялась между двумя переменными, вы можете сделать их объектами. Объекты обычно передаются по ссылке в Javascript. Попробуйте следующее:

Контроллер

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showFirstName = { status: true };
  showLastName = { status: true };

  checkboxSelect: any[] = [{
    label: 'First name',
    name: this.showFirstName,
    inputName: 'showFirstName'
  }, {
    label: 'Last name',
    name: this.showLastName,
    inputName: 'showLastName'

  }, ];

  checkStatus() {
    console.log(this.checkboxSelect[0].name, this.checkboxSelect[1].name);
  }
}

Шаблон

<li *ngFor="let checkbox of checkboxSelect">
  <div class="checkbox-style">
    <input type="checkbox" name="{{checkbox.inputName}}" [checked]="checkbox.name.status"
      (change)="checkbox.name.status = !checkbox.name.status; checkStatus()" />
    <div class="state">
      <label>{{checkbox.label}}</label>
    </div>
  </div>
</li>

<table>
  <th *ngIf="showFirstName.status" scope="col">First Name</th>
  <th *ngIf="showLastName.status" scope="col">Last Name</th>
</table>

Примечание. Использование ссылки на объект для управления состоянием переменных может сильно запутаться в дальнейшем в разработке. Лучше подумать о другой структуре.

Рабочий пример: Stackblitz

Answer 2

Почему бы вам не использовать Angular ngModel? Тогда вам не нужно определять обработчик изменений.

<li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" name ="{{checkbox.inputName}}" 
                [(ngModel)] ="checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>

Answer 3

Измените html на: -

<li *ngFor="let checkbox of checkboxSelect">
      <div class="checkbox-style">
          <input type="checkbox" [name] ="checkbox.inputName" 
                [checked]="checkbox.name"
                (change)="checkbox.name = !checkbox.name"/>
             <div class="state">
                 <label>{{checkbox.label}}</label>
             </div>
      </div>
  </li>