Question

更新：

我的.ts文件中包含此代码：

export class SettingsComponent implements OnInit {
  statuses;

  constructor(settings: SettingsService) {
    this.statuses = [
      {id: 1, color: '#ccffcc', name: 'Status 1'},
      {id: 2, color: '#ffaa00', name: 'Status 2'},
      {id: 3, color: '#ffff00', name: 'Status 3'},
      {id: 4, color: '#ccccff', name: 'Status 4'},
      {id: 5, color: '#ffcccc', name: 'Status 5'},
    ];
  }
}

我的.html文件中有这段代码：

<div class="row" *ngFor="let status of statuses">
  <mat-form-field class="col-3">
    <mat-color-picker
      matPrefix
      matConnectedColorPicker
      [matConnectedColorPickerOrigin]="'color' + status.id"
      selectedColor="{{ status.color }}"></mat-color-picker>
    <input matInput matPrefix type="text"
      [attr.id]="'color'+ status.id"
      matColorPickerOrigin
      #color1="matColorPickerOrigin"
      value="{{ status.color }}">
  </mat-form-field>
</div>

我想显示一个颜色选择器，一个带有颜色六进制代码的输入字段，一个状态名称输入字段和一个删除按钮。我想用这个逻辑：

如果用户点击颜色选择器并选择一种颜色，它将改变颜色六进制代码输入字段的值。

用户可以添加多种具有独特颜色的状态。

现在我无法弄清楚如何使用我的代码的#color1部分

#'color'+status.id

是否有任何解决方案或最佳做法可以将我的代码更改为在*ngFor指令内工作？

如何在Angular * ngFor中使用subscribe？

0 个答案: