如何从 KeyValue 管道中过滤特定值以显示在 html 表中的特定标题下 |角 6 +

Posted 2023-03-13

【中文标题】如何从 KeyValue 管道中过滤特定值以显示在 html 表中的特定标题下 |角 6 +

【英文标题】：How to filter specific value from KeyValue pipe to display under specific header in html table | Angular 6 +

【发布时间】：2019-09-26 02:48:33

【问题描述】：

基本上我有一些 JSON 数据（对象：键值对），我想在 html 表中显示它，所以我的 json 中只有对象，我正在使用 Keyvalue 管道，但问题是我正在获取所有值来自 Keyvalue 管道随机显示在表格单元格中。我想在各自的标题下专门显示。

我想使用诸如 key1.value1、key2.value2 ... 之类的数据。

我的组件.ts

products: string[];

构造函数（私有 httpService: HttpClient）

ngOnInit()

this.httpService.get('products.json').subscribe(
  data => 
    this.products = data as string[] ;


  ,
  (err: HttpErrorResponse) => 
    console.log (err.message);
  );

我的组件.html

                          <table>
                          <thead>
                           <tr>

                              <th>Parameter</th>
                              <th>Order Val</th>
                              <th>Order Min</th>
                              <th>Order Max</th>
                          </tr>
                          </thead>

                     <tbody>
                     <tr *ngFor='let product of products | keyvalue'>
                        <td>product.value</td>

                           </tr>
                         </tbody>
                        </table>

json数据

“参数”：“样本”， "orderVal": 2, "orderMin": 1, “订单最大”：6，

【问题讨论】：

***.com/questions/55849690/…

@arunkumar : 感谢您的回复，这个问题与Angular 6中引入的新管道（Keyvalue）完全相关，请您再次检查。

我认为这仅适用于地图类字段

【参考方案1】：

上面的其中一个 cmets 正确地提到 keyvalue 管道不是用于列表，而是用于映射类型的字段（具有键值对的东西），因此它不适用于 products: string[];。

在 Component.ts 中，我将创建自定义项目对象列表 (products: myCustomProduct[];)，而不是字符串列表 (products: string[];)，其中 myCustomProduct 是自定义类（或者您可以使用类型我想）：

class myCustomProduct 
   parameter: string;
   orderVal: int;
   orderMin: int;
   orderMax: int;

然后在 ngOnInit() 中的 subscribe 语句中，将 JSON 转换为 products（我必须查看完整的 JSON 才能为您拼写出来，而不仅仅是单个产品的 JSON），您然后可以在 HTML 中使用：

<tr *ngFor='let product of products'>
    <td>product.parameter</td>
    <td>product.orderVal</td>
    <td>product.orderMin</td>
    <td>product.orderMax</td>
</tr>

尽管尝试将每个项目编码为不受约束的字典，然后使用键值管道自动通过属性 ngFor 可能很有吸引力，但这将行与示例中的硬编码列标题分离。在我看来，将 JSON 作为实际对象模型读取会创建更具可读性和可维护性的代码。