如何从 JSON 文件中检查如果 "Process" : false 那么数据数组行应该是 angular 11 中的另一种颜色

Question

如何从 JSON 文件中检查数据类型是否为“Process”：false 那么相同的数据数组行应该是另一种颜色。请在 component.ts 文件中查看我的代码。我正在从 json 文件的行中按类型过滤。如果 json 文件处理错误，请指导如何渲染，然后数据数组行应该是不同的颜色。

ngOnInit(): void {
    this.loader.loaderdiv = true;
    this.subscription = this.api.getRealTimeData().subscribe(data => {
      this.loader.loaderdiv = false;
      console.log("****", data);
      this.logisticHpPlantDate2 = data.filter((plant) => plant.type == 'Logistic HP plant Data 2');
      this.logisticHpPlantDate3 = data.filter((plant) => plant.type == 'Logistic HP plant Data 3');
    })
  }

我从 json 文件的行中过滤类型，然后数组列表已合并到 component.html 文件中。

<div class="row m_top5" *ngFor="let data of logisticHpPlantDate2" >
                <div class="col-sm-8 p_right0" >{{data.name}}</div>
                <div class="col-sm-4 text-right p_left0">{{data.data}}</div>
</div>

另请参阅我的 JSON 代码，该代码在我的页面中呈现。

{
        "type": "Logistic HP plant Data 2",
        "name": "4CBA - Impurity",
        "data": "887 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Benzoic acid - Impurity",
        "data": "654 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "p-toluic acid - Impurity",
        "data": "500 TO"
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Phthalic acid / Isophthalic acid",
        "data": "100 TO",
        "process": false
    },
    {
        "type": "Logistic HP plant Data 2",
        "name": "Water",
        "data": "15 TO",
        "process": false
    },

另见我的截图

但我的要求是

如何解决这个问题。

Answer 1

您可以根据条件 process: false 添加特定的 class（在此示例中为 foo）并在 css 中进行格式化：

<div class="col-sm-4 text-right p_left0" [ngClass]={'foo': !data.process}>{{data.data}}</div>

编辑：

首先，请花时间查看 NgClass 文档。

一般语法是这样的：[ngClass]="{'classToAdd': condition }"

当 condition 为真时 Angular 将添加 classToAdd，当 condition 为假时将删除 class。所以在你的情况下你有一些选择：

[ngClass]="{'down': data.process === 'down'}" // Add down class when process === 'down', remove it otherwise
[ngClass]="{'up': data.process === 'up'}" // Add up class when process === 'up', remove it otherwise
[ngClass]="{'down': data.process === 'down', 'up': data.process === 'up'}" // Do both

如何从 JSON 文件中检查如果 "Process" : false 那么数据数组行应该是 angular 11 中的另一种颜色

How to check from JSON file if "Process" : false then data array line should be another color in angular 11

angular

angular11