如何通过单击相应的删除图标从UI中删除字段- Angular

<div *ngFor="let field of fields">
  <span>{{ field.name }}</span>
  <i class="delete-icon" (click)="deleteField(field)"></i>
</div>

export class YourComponent {
  fields: any[] = [
    { name: 'Field 1' },
    { name: 'Field 2' },
    { name: 'Field 3' }
  ];

  deleteField(field: any) {
    const index = this.fields.indexOf(field);
    if (index !== -1) {
      this.fields.splice(index, 1);
    }
  }
}

.delete-icon {
  cursor: pointer;
  /* 添加删除图标样式，这里使用了Font Awesome图标库 */
  /* 可以根据需要使用其他图标库或自定义样式 */
  /* 示例：使用Font Awesome的垃圾桶图标 */
  background: url('path/to/trash-icon.png') no-repeat;
  width: 20px;
  height: 20px;
}