使用 Angular 动态显示基于 API 值的图标

Question

我试图创建一个动态表单，我需要在其中显示我创建的字段的图标。这是我的 UI 屏幕，我在其中显示我在字段浏览器中的字段。

列表来自 api。

这里我需要在文本中放置一个图标

这是我当前的 html 代码

       <div class="fieldexplorer">
           <div class="sectionHeader_field">
                Field Explorer
           </div>
           <div *ngFor="let label of labels;">
                  {{label.labelName}}
           </div>
       </div>

这是我的 ts 代码

    /*Display text from backend for field explorer*/
    this.labels = this.fieldData[0].fields.map(element => {
      const data = {
        labelName: element.labelName,
        fieldType: element.fieldType
      };
      console.log(this.data);
       return data; 
       
    });

全长代码ts如下答案

icons = {
  Number: "number",
  Text: "text",
  Radio: "radio",
  checkbox: "checkbox",
  list: "listbox"
}

getFieldData() {
const data = {
  module: this.data.entityName,
  entity: this.data.entityFormName
};

if (data.module && data.entity) {
  // if (!((data.module === undefined || null) && (data.entity === undefined || null))) {
  this.settingService.getFormData(this.fields, data.module, data.entity).subscribe((response) => {
    this.fieldData = response;
    
    /*Display text from backend for field explorer*/
    this.labels = this.fieldData[0].fields.map(element => {
      const data = {
        labelName: element.labelName,
        fieldType: element.fieldType
      };
      console.log(this.data);
       return data; 
       
    });
    
    console.log(this.labels);
    this.fieldData[0].sections[0].fields.forEach(element => {
      this.personalFieldsLocks[element.fieldName] = element.locked;
    });
    console.log( this.personalFieldsLocks);
    //console.log(this.fieldData[0].sections[0].fields,'this.fieldData');
    this.fieldData[0].sections[0].fields.forEach(element => {
      console.log(element.fieldName, element.locked,'lockedkey======')
    });
  })
}    
}

这是我的 css

        .number::before{
        font-family: "Font Awesome 6 Free";
        content: "\f893";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .text::before{
        font-family: "Font Awesome 6 Free";
        content: "\f893";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .radio::before{
        font-family: "Font Awesome 6 Free";
        content: "\f140";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .checkbox::before{
        font-family: "Font Awesome 6 Free";
        content: "\f14a";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }
    .listbox::before{
        font-family: "Font Awesome 6 Free";
        content: "\f022";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight:900;
    }

我想的是根据字段类型我可以显示相关的图标。

这里是供参考的控制台。在控制台中有一个属性调用 fieldType:

如果是文本我需要显示文本（T）图标，如果是单选按钮（圆形）我需要显示那样的单选图标。

不确定在这段代码中将数组放在哪里。

Answer 1

例如，我会创建一个包含所有可能图标的对象（请键入对象，我只是懒惰）

icons = {
  Number: "Number icon name here",
  Text: "Text icon name here",
  Radio: "Radio icon name here"
}

如果您的数组看起来像这样：

arr = [
  {fieldName: "fieldName1", fieldType: "Number"},
  {fieldName: "fieldName2", fieldType: "Text"},
  {fieldName: "fieldName3", fieldType: "Radio"},
]

然后在模板中，在迭代中你可以使用：

<div *ngFor="let a of arr">
  <p>{{icons[a.fieldType]}}</p>
</div>

p 字段和其他所有内容只是演示，您需要将其应用到您的用例中。

使用 Angular 动态显示基于 API 值的图标

Show icon based on the API value using Angular dynamically

angular

typescript

angular8