当来自 api 的响应不完全在 angular 中时，如何跳过 ngFor？

Question

目前我已经能够在前端显示所有结果。 但是我怎样才能让 ngFor 只显示那些没有$ref的对象，并且必须在数组中包含名称和描述？

组件.html

<body>
    <app-header></app-header>
    <div class="container body-content">
        <br>
        <h2>Title</h2>
        <br>
        
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Value</th>
            </tr>

            <tr *ngFor="let group of groups ">
              <td>{{group.Name}}</td>
              <td>{{group.Description}}</td>
              <td>{{group.value}}</td>
            </tr>
        </table>
    </div>

</body>

从 API 回复

Answer 1

您将不得不编写一个 pipe 来实现这一点。

在您的模板文件中：

<tr *ngFor="let group of groups | myfilter">

在您的 pipe 中：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[]): any {
        if (!items) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => (!Boolean(item['$ref']) && Boolean(item.Name) && Boolean(item.Description));
    }
}

在您的 appModule 中：

import { MyFilterPipe } from './pipes/my-filter.pipe';

@NgModule({
    imports: [
        ..
    ],
    declarations: [
        MyFilterPipe,
    ],
    providers: [
        ..
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

我建议为此使用 Angular pipe 过滤。

您的 HTML：

<body>
    <app-header></app-header>
    <div class="container body-content">
        <br>
        <h2>Title</h2>
        <br>
        
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Value</th>
            </tr>

            <tr *ngFor="let group of groups | filterOutObjectsWithRef: 'dsc' ">
              <td>{{group.Name}}</td>
              <td>{{group.Description}}</td>
              <td>{{group.value}}</td>
            </tr>
        </table>
    </div>
</body>

过滤出对象-with-ref.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filterOutObjectsWithRef",
  pure: false,
})
export class FilterOutObjectWithRef implements PipeTransform {
  transform(items: any[], sort: "asc" | "dsc" = "asc"): any {
    if (!items) {
      return items;
    }

    return items
      .filter(
        (item) =>
          item.$ref === undefined &&
          item.Name !== undefined &&
          item.Description !== undefined
      )
      .sort((a, b) => {
        if (sort === "asc") {
          return a.Name > b.Name ? 1 : -1;
        } else {
          return a.Name < b.Name ? 1 : -1;
        }
      });
  }
}

在您的模块或组件中声明此 Pipe class ，您将过滤掉所有具有$ref属性的对象

Answer 3

您首先检查响应是否有效：

<body>
    <app-header></app-header>
    <div class="container body-content">
        <br>
        <h2>Title</h2>
        <br>
        
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Value</th>
            </tr>
<div *ngIf="CHECK IF RESPONSE WAS CORRECT">
            <tr *ngFor="let group of groups ">
              <td>{{group.Name}}</td>
              <td>{{group.Description}}</td>
              <td>{{group.value}}</td>
            </tr>
</div>
        </table>
    </div>

</body>

Answer 4

只需添加一个 if 条件

<ng-container *ngIf="groups && groups.length">   <!-- if length is greater than 0 -->
     <tr *ngFor="let group of groups ">
<ng-container *ngIf="(!group.$ref) && group.Name && group.Description"> <!-- to check your case which keys should be there to print <td> -->
                   <td>{{group.Name}}</td>
                  <td>{{group.Description}}</td>
                  <td>{{group.value}}</td>
</<ng-container>
                </tr>

<ng-container>

[编辑]

由于大多数答案推荐 pipe 方式。 （我也建议使用它，只是我使用通用 pipe 或者如果需要在多个地方存在相同的逻辑。

只是为了扩展从发布的其他答案中获取的引用，我建议在 pipe 下方使用，因为它是一个通用的，您只需传递 **allow ** props like ['Name','Description'] 和disallow props ['$ref']。 它将遍历每个属性，可以在多个地方使用。 （它可以进一步优化考虑其他因素。）

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filterOutObject",
  pure: false,
})
export class FilterOurObjectWithRef implements PipeTransform {
  transform(items: any[] , allow = [], disallow = []): any {
    if (!items) {
      return items;
    }
    // check every allowed and disallowed props
    return items.filter((obj) => { 
       return allow.every((prop) => obj[prop] !== undefined) && disallow.every((prop) => obj[prop] === undefined)
    });
  }
}

当来自 api 的响应不完全在 angular 中时，如何跳过 ngFor？

问题描述

4 个解决方案

解决方案1
1 2020-07-01 13:43:25

解决方案2
1 2020-07-01 13:46:55

解决方案3
0 2020-07-01 13:43:06

解决方案4
0 已采纳 2020-07-01 13:46:45

当来自 api 的响应不完全在 angular 中时，如何跳过 ngFor？

问题描述

4 个解决方案

解决方案1 1 2020-07-01 13:43:25

解决方案2 1 2020-07-01 13:46:55

解决方案3 0 2020-07-01 13:43:06

解决方案4 0 已采纳 2020-07-01 13:46:45

解决方案1
1 2020-07-01 13:43:25

解决方案2
1 2020-07-01 13:46:55

解决方案3
0 2020-07-01 13:43:06

解决方案4
0 已采纳 2020-07-01 13:46:45