Question

我想分开一些数据。情况是下一个。从我的数据库中获取JSON，它有一些不同的列。例如：id，name，message，type。我想根据类型内容将数据绑定到不同的div。

所以我想绑定那些包含所需数据的数据字符串（例如=＆＃39;连接错误＆＃39;）

在我的html文件中：

<div *ngFor="let data of data.data ">{{data.type}}</div>

我希望以分离的方式显示JSON中的所有数据。有什么方法可以满足绑定内容的要求吗？像这样{{data.type =＆＃39;＆＃39;}}要求将是类型列内容。我这样试试：

<div *ngFor="let data of data.data; let type = connection error">
      {{data.message}} {{data.id}}
</div>

<div *ngFor="let data of data.data; let type = request error">
      {{data.message}} {{data.id}}
</div>

我的TS是：

import { Component, OnInit, NgModule, Input} from '@angular/core';
import { ErrorsService } from './errors.service';

@Component({
  selector: 'app-errors',
  templateUrl: './errors.component.html',
  styleUrls: ['./errors.component.css'],   
})
export class ErrorsComponent implements OnInit {

    data: any = [];

    constructor(private errorsService: ErrorsService) {   }

    ngOnInit() {      
        this.errorsService.getAllErrors().subscribe(data => {
            this.data = data
        });  
    }    
  }

Answer 1

我不是100％确定你想要的是什么，但如果你只是想对type做一个简单的检查，你可以用*ngIf或*ngSwitch来做。

<div *ngFor="let data of data.data;>
  <div *ngIf="data.type === 'connection-error'">
    There was a connection error
  </div>
  <div *ngIf="data.type === 'request-error'">
    There was a request error
  </div>
</div>

Answer 2

有两种方法。如果要在模板中解决此问题，可以创建一个过滤具有特定类型的条目的自定义管道。结果看起来像这样：

<div *ngFor="let data of data.data | type : 'connection error">
    {{data.message}} {{data.id}}
</div>

以下是有关如何设置自定义管道的文档：https://angular.io/guide/pipes

第二种方法是基于TS的。您可以将TypeScript中的它们拆分为4个单独的变量。这可以通过Map.reduce（）（或Map.forEach / filter＆amp; map）轻松实现

使用参数Angular 5进行数据绑定

2 个答案: