html - 是否可以从输入类型 : color and apply to form values that get outputted onto a table once submitted? 中获取十六进制值

Question

这是我第一次在这里发帖，所以请建议我还应该提供什么!

我用 Angular 做了一个小的 CRUD 应用程序。它只是一个包含 4 个字段的简单表单，一个使用输入类型 ='color' 的颜色选择器和一个提交按钮。当您点击提交时，信息将被存储并显示在表格旁边的表格中。

我还是 JavaScript (TypeScript) 的新手，我需要一些颜色方面的帮助。假设您填写完表格并在点击提交之前选择颜色 Aqua #00FFFF，在用户点击提交后我如何将颜色应用于文本？我能够提取十六进制代码，但无法弄清楚其余部分!

这是提交部分

onSubmit(form: NgForm) {
const data = Object.assign({}, form.value);
delete data.id;
if (form.value.id == null) {
  this.firestore.collection('catsanddogs').add(data);
} else {
  this.firestore.doc('catsanddogs/' + form.value.id).update(data);
}
form.resetForm(form);
this.toastr.success('You have successfully logged your Cat or Dog!', 'Logged');
console.log(form);
}

这是我订阅数据的地方

ngOnInit() {
    this.service.getCatsandDogs().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data() } as CatsorDogs;
      });
    });
  }

这是表格的 HTML，id 是用于在 Firebase 中识别文档的内容!

<tbody>
<tr *ngFor="let catdog of list">    
  <td>{{ catdog .hmCode }} - {{ catdog .fullName }}</td>
  <td (click)="onEdit(catdog )">{{ catdog .position }}</td>
  <td (click)="onEdit(catdog )">{{ catdog .attitude }}</td>
  <td><a class="btn text-danger" (click)="onDelete(catdog .id)"><i class="fa fa-trash"></i></a></td>
</tr>

我希望输出的文本是用户选择的任何颜色。

这是相同应用的屏幕截图!

https://www.dropbox.com/s/zg1wq4v28j3hw9i/Screenshot%20%281%29.png?dl=0

Answer 1

您可以通过 Angular 样式绑定(bind)来实现它。例如，保留一个名为 selectedColor 的类变量。使用用户选择的十六进制值在提交时分配它。您需要将该变量绑定(bind)到您的 html 元素的颜色，如下所示。

<i [style.color]="selectedColor">Lorem ipsum...</i>