Угловая манипуляция не работает должным образом

Question

У меня есть набор флажков, использующих массив следующим образом:

 <div *ngFor="let order of orders; let i = index">
    <input type="checkbox" id="{{orders[i].name}}_i">{{orders[i].name}}
  </div>

Предположим, флажки с идентификаторами order1, order2 .... и т.д.

Что мне нужно, я хочу изменить флажки, чтобы включить или отключить их с помощью идентификаторов или любого другого механизма, например, следующего:

document.getElementById("order1").checked = true;

Я пробовал, но он не работает и показывает ошибки.

В моих исследованиях я видел вариант @ViewChild. Но для этого мне нужно сначала объявить, что у меня есть id может быть любым, он не может быть предопределен, может быть любым. пожалуйста, предложите мне механизм ...

Answer 1

Вам действительно нужно использовать JavaScript?Поскольку вы находитесь в контексте Angular и TypeScript, вы можете использовать привязку Angular Two-Way для достижения того, что вы хотите сделать.

Вы можете добавить свойство checked к своей модели "order" и затем связатьэто checked свойство для ввода флажка ngModel.

order.ts

export class Order {
  public name: string;
  public checked: boolean;
  ...
}

component.ts

@Component(...)
export class MyComponent {
  public orders: Array<Order>; // Initialize with ngOnInit hook or any other way.
}

component.html

<div *ngFor="let order of orders; let i = index">
    <input type="checkbox" [(ngModel)]="order.checked">{{order.name}}
</div>

Обратите внимание, что вам на самом деле не нужно использовать синтаксис orders[i] для доступа к текущему объекту, поскольку у вас уже есть переменная order, представляющая текущий порядок в цикле.Больше информации на сайте Angular: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

Теперь, если вы хотите контролировать проверенное состояние ваших предметов, вы можете просто изменить значение checked любого из ваших Order объектов и егобудет автоматически обновляться на вашем интерфейсе:

@Component(...)
export class MyComponent {
  public orders: Array<Order>; 

  public checkFirstOrder(): void {
    this.orders[0].checked = true;
  }
}

Надеюсь, это поможет.