Question

我有一组使用数组的复选框，如下所示：

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

让我们假设ID为order1，order2 .... etc的复选框

我需要更改的复选框使它使用id或其他类似如下的机制进行了选中/取消选中：

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

我尝试过，但是它不起作用并且显示错误。

在我的研究中，我看到了一个选项@ViewChild。但是为此，我需要先声明一下，我拥有的是id可以是任何它，不能预定义它也可以是任何。请给我建议一种机制...

Answer 1

您真的需要使用JavaScript吗？由于您处于Angular和TypeScript上下文中，因此可以使用Angular双向绑定来实现所需的功能。

您可以在“订单”模型中添加checked属性，然后将此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;
  }
}

希望有帮助。

角度dom操作无法按预期方式进行

1 个答案:

order.ts

component.ts

component.html