javascript - 如何为过滤结果选择更多复选框值？

Question

我有一些用于过滤的复选框。我可以选择一个或多个复选框。但例如，您将选择两个复选框，那么只有最后一个选定的复选框才会显示来自后端的值。

所以我将其作为 HTML:

<div class="mat-checkbox-project-absolute">
    <div *ngIf="showProjectFilter"  class="mat-checkbox-project">
        <div class="row" *ngFor="let item of returnProjectCodes; let i = index">
            <mat-checkbox
                (click)="$event.stopPropagation()"
                (change)="filterProjects($event, i, item);"
                [checked]="selected === i">
                    {{ item.name }}
            </mat-checkbox>
        </div>
    </div>
</div>

这就是方法:

returnProjectCodes: ProjectApi[] = [];

filterProjects(event, index, item) {
    if (event.checked === true) {
        const hallo =  this.returnProjectCodes.push(item);
        console.log(hallo);
        this.extendedSearchFilterService.filterByProject(item.projectId).subscribe(pipe());
        this.datasource.filter = item.name;
    } else {
        this.datasource.filter = '';
    }
}

Answer 1

组件:

 export class AppComponent implements OnInit  {

  list: any[];

  ngOnInit() {
    this.list = [
      {
        id: 1,
        title: 'Администратор',
        checked: true,
      },
      {
        id: 2,
        title: 'Пользователь',
        checked: false,
      },
      {
        id: 3,
        title: 'Директор',
        checked: false,
      },
      {
        id: 4,
        title: 'Начальник',
        checked: false,
      },
    ]
  }

  get result() {
    return this.list.filter(item => item.checked);
  }

HTML:

<ul>
    <li *ngFor="let item of list| slice:0:this.result.length+1; let ind=index;">
    <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
  </li>
</ul>

希望这个例子能让您了解如何实现这一目标。这不是一个很好的实现方法，但您可以解决