如何在angular 7中从对象数组中用复选框制作列表并实现多选和全选

<!-- component.html -->
<div>
  <input type="checkbox" [(ngModel)]="selectAll" (change)="selectAllItems()">
  <label>全选</label>
</div>

<div *ngFor="let item of items">
  <input type="checkbox" [(ngModel)]="item.selected" (change)="selectItem(item)">
  <label>{{ item.name }}</label>
</div>

<button (click)="getSelectedItems()">获取选中的对象</button>

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class Component {
  items = [
    { name: '对象1', selected: false },
    { name: '对象2', selected: false },
    { name: '对象3', selected: false }
  ];

  selectAll = false;

  selectAllItems() {
    for (let item of this.items) {
      item.selected = this.selectAll;
    }
  }

  selectItem(item) {
    if (!item.selected) {
      this.selectAll = false;
    } else {
      this.selectAll = this.items.every(item => item.selected);
    }
  }

  getSelectedItems() {
    const selectedItems = this.items.filter(item => item.selected);
    console.log(selectedItems);
  }
}