时间戳

首页 > 解决方案 > 是否可以从输入类型中获取十六进制值：颜色并应用于表单值，一旦提交就会输出到表格中？

html - 是否可以从输入类型中获取十六进制值：颜色并应用于表单值，一旦提交就会输出到表格中？

问题描述

这是我第一次在这里发帖，所以请告知我应该提供的更多内容！

我在 Angular 中制作了一个小 CRUD 应用程序。它只是一个包含 4 个字段的简单表单，一个使用 input type='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

标签： htmlangulartypescript

解决方案

You can achieve it with style binding in angular. For example keep a class variable named selectedColor. Assign it on submit with the hex value selected by the user. You need to bind that variable to your html element's color like below.

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

推荐阅读