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

Question

目前我已经可以在前端显示所有的结果了。但是我怎样才能让 ngFor 只显示那些没有 $ref 的对象并且必须包含 Name 和 Description 在数组中？

component.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>

Respond from API

Answer 1

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

<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 2

你必须写一个管道来实现它。

在您的模板文件中：

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

在你的管道中：

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));
    }
}

在您的应用模块中：

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

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

Answer 3

只需添加一个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>

[编辑]

因为大多数答案都推荐管道方式。（我也建议使用它，问题是我使用通用管道，或者如果需要在多个地方使用相同的逻辑。

只是为了扩展从发布的其他答案中获取的引用 我建议使用下面的管道，因为它是通用的，你只需传递 **allow ** 道具，如 ['Name'、'Description'] 和禁止道具 ['$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)
    });
  }
}

Answer 4

我建议为此使用 Angular 管道过滤。

你的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>

过滤对象-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 属性

的所有对象

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

How to skip the ngFor when the respond from api is not completely in angular?

html

angular

angular9