这是我第一次张贴在这里,所以请就我应该提供更多的建议!
我做了一个角度小积垢应用程序。这只是一个有4个字段的简单表单,一个使用input type='color'的颜色选择器和一个submit按钮。单击“提交”时,信息将被存储并显示在表单旁边的表中。
我对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

最佳答案

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

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

09-10 10:55
查看更多