javascript - 使用 Angular 获取所有选定复选框的值

Question

如果我在互联网上搜索时在其他地方问过这个确切问题，我深表歉意，但我发现了一些类似的场景及其解决方案，但不是我正在寻找的。希望有人能在这方面帮助我。所以这里是，

I need to obtain the value of all the checkboxes that have been checked. The checkboxes are dynamically created based on the number of Array (assets) items

我正在创建一个表单，它使用 ngFor 来遍历数组，并为每个字段创建复选框。所以我所做的就是这样的，

    <form>
      <div class="row"><label>Assets</label></div>
      <div *ngFor='let asset of assets' [(ngModel)]='assets'>
        <div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
        <div class="col-35"><label>{{asset}}</label></div>
      </div>
    </form>

外面有很多解决方案，但不幸的是每个人都举了一个例子，其中数组更像是一个键:值对，例如，

    this.someArray = [
       {id:1, name: someName, isSelect: false},
       {id:2, name: someOtherName, isSelect: false}
    ]

我了解如何使用这种数组结构，但就我而言，我有以下字符串数组，

    assets: String[] = ['one', 'two', 'three'];

我的问题是，当我只有一个简单的字符串数组时，如何获取已检查的所有值。到目前为止我所做的事情是这样的， asset.component.html

    <form>
    <div class="row"><label>Assets</label></div>
    <div *ngFor='let asset of assets' [(ngModel)]='assets'>
    <div class="col-8"><input type="checkbox" name="{{asset}}" (change)="onChange()"></div>
    <div class="col-35"><label>{{asset}}</label></div>
    </div>
    </form>

asset.component.ts

    export class AppComponent  {
      name = 'Angular ' + VERSION.major;
    
      assets: String[] = ['one', 'two', 'three'];
      
      onChange(): void {
        alert(this.assets);
      }
    }

任何帮助将不胜感激。期待尽快收到您的回复，

作为引用，这里是 StackBlitz 实现(尚未完成)，

https://stackblitz.com/edit/angular-ivy-jtnzhp?file=src/app/app.component.html

亲切的问候

Answer 1

你可以这样做:

HTML 文件:

<div *ngFor="let asset of assets">
  <input (change)="onChange(asset)" type="checkbox" value="{{ asset }}" />{{asset}}
</div>

TypeScript 文件:

assets: string[] = ['one', 'two', 'three'];
all_selected_values: string[] = [];

onChange(value: string): void {
  if (this.all_selected_values.includes(value)) {
    this.all_selected_values = this.all_selected_values.filter((item) => item !== value);
  } else {
    this.all_selected_values.push(value);
  }
  console.log(this.all_selected_values);
}

Working example