0

我有一个 web api (.NET Core 3.1)，它返回一个如下所示的 json：

[
    {
        "counterparty": "Santander",
        "tradeDate": "2020-05-23T10:03:12",
        "isin": "DOL110",
        "typology": 0
    },
    {
        "counterparty": "Jordan Banks",
        "tradeDate": "2020-06-11T11:23:22",
        "isin": "LIT250",
        "typology": 0
    },
    {
        "counterparty": "Santander",
        "tradeDate": "2020-06-11T11:24:08",
        "isin": "LIT300",
        "typology": 0
    }
]

我使用下面的组件和角度服务来使用这个 web api。到目前为止，我返回了counterparty所有对象的字段。

操作.component.ts：

import { Component, OnInit } from '@angular/core';
import { OperationsService } from "./operations.service";

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

  data: any;

  constructor(private operationsService: OperationsService) { }

  ngOnInit(): void {
    this.loadOperations();
  }

  loadOperations() {
    return this.operationsService.getOperations().subscribe(source => this.data = source);
  }
}

操作.component.html：

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

操作.service.ts：

import { Injectable, Inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class OperationsService {

  constructor(private http: HttpClient) { }

  public getOperations() {
    return this.http.get("https://localhost:44329/api/operations");
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './user/login/login.component';
import { OperationsComponent } from './operations/operations/operations.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    LoginComponent,
    OperationsComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'api/operations', component: OperationsComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我现在需要的是在交易对手字段中应用过滤器以仅返回不同的值，即不重复相等的值。我正在尝试使用 ng-repeat，但出现错误：

未捕获的错误：模板解析错误：找不到管道“唯一”（“]数据项|唯一：item.counterparty”> {{item.counterparty}}“）

那么，我怎样才能得到数组的不同值呢？我可以只在 component.html 中执行此操作，还是我还必须更改 component.ts？

4

2 回答 2

2

我认为最好让你的 this.data 数组在 component.ts 中唯一，然后在 component.html 中显示。

您可以基于“交易对手”使用另一个具有承诺的函数来使数据数组独一无二。

 // make data array unique
codeToMakeItUnique = dataArr => {
    return new Promise((resolve, reject) => {
        const UniArr = []
        const map = new Map()
        for (const item of dataArr) {
            if (!map.has(item.counterparty)) {
                map.set(item.counterparty, true) // set any value to Map
                UniArr.push(item)
            }
        }
        resolve(UniArr)
    })
}

所以你的 component.ts 看起来像：

import { Component, OnInit } from '@angular/core';
import { OperationsService } from "./operations.service";

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

    data: any;

    constructor(private operationsService: OperationsService) { }

    ngOnInit(): void {
        this.loadOperations();
    }

    loadOperations() {
        return this.operationsService.getOperations().subscribe(async source => {
            this.data = await this.codeToMakeItUnique(source)
        });

        // make data array unique
        codeToMakeItUnique = dataArr => {
            return new Promise((resolve, reject) => {
                const UniArr = []
                const map = new Map()
                for (const item of dataArr) {
                    if (!map.has(item.counterparty)) {
                        map.set(item.counterparty, true) // set any value to Map
                        UniArr.push(item)
                    }
                }
                resolve(UniArr)
            })
        }
    }
}

在您的 component.html 中，您可以简单地调用您的数据数组本身

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

希望这可以帮助。

于 2020-06-11T17:39:27.550 回答
1

问题尚不清楚，但如果您想从数组中删除重复值，请将其转换为一个集合，然后再转换回一个数组。也就是说，如果数组不包含复杂对象

  loadOperations() {
    return this.operationsService.getOperations().subscribe(source => this.data = Array.from(new Set(source.map((item: any) => item.counterparty))));
  }

这会给你[ "Santander", "Jordan Banks" ]

于 2020-06-11T15:17:47.187 回答