时间戳

首页 > 解决方案 > 使用对象参数拉另一个对象

angular - 使用对象参数拉另一个对象

问题描述

重新向 Angular 介绍自己，想问一个问题。我将约会数据提取到我的字段中，我需要使用约会对象中的“UserId”参数提取用户名，并使用用户中的“UserId”参数提取用户，然后显示名称. 它们都可以很好地进入我的控制台，但是我该如何在前端编写它来做到这一点？

        <mat-accordion>
        <mat-expansion-panel class="content" *ngFor="let app of appointments, let i = index">
          <mat-expansion-panel-header *ngFor="let user of users">
            <mat-panel-title>Image: </mat-panel-title>
            <mat-panel-title ***ngIf="app.UserId === user?.UserId">Client: {{user?.ContactId}}**</mat-panel-title>
            <mat-panel-title>Location: {{this.currentLocation}}</mat-panel-title>
            <mat-panel-title>Date: {{app.StartDate| date : 'MM-dd-yyyy'}}</mat-panel-title>
            <mat-panel-title>Time: {{app.StartDate| date : 'hh:mm'}}</mat-panel-title>
            <i class="material-icons-outlined" style="align-self: end">expand_more</i>
          </mat-expansion-panel-header>
          <mat-panel-description>
            <p>Desc: {{app.Description}}</p>
          </mat-panel-description>
        </mat-expansion-panel>
    </mat-accordion>

标签： angularangular-materialangular12

解决方案

您的目标是pipe过滤您的数据。让我们通过一个简单的例子。

Apipe看起来像这样filter-user.pipe.ts：

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

@Pipe({
  name: 'filterUser',
  pure: false
})
export class FilterUserPipe implements PipeTransform {
  transform(users: string[], filterUser: string): any {
    if (!users || !filterUser) {
      return users;
    }

    return users.filter(user => user === filterUser);
  }
}

您component的约会和用户数据app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html'
})
export class AppComponent {

  // your Appointments
  appointments: Appointment[] = [
    {
      name: 'Brolly',
      surname: 'Patel',
      date: new Date()
    },
    {
      name: 'Goku',
      surname: 'Smith',
      date: new Date()
    },
    {
      name: 'jimmy',
      surname: 'Smith',
      date: new Date()
    }
  ];

  // your Users
  users: string[] = ['John', 'Brolly', 'Goku', 'Gohan'];
}

// Interface you may want to put in another separate file.
export interface Appointment {
  name: string;
  surname: string;
  date: Date;
}

为了方便您理解，我呈现了以下 HTML app.component.html：

<div *ngFor="let appointment of appointments">
  <div *ngFor="let user of users | filterUser: appointment.name">
    {{user}}
  </div>
</div>

当您创建时，请pipe记住将其添加到您module的声明数组中。（我说的是关于模块，因为它有助于延迟加载）app.module.ts：

import { AppComponent } from './app.component';
import { CoreModule } from './core';
import { FilterUserPipe } from './filter-user.pipe';
import { HelloFrameworkModule } from './hello-framework';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent, FilterUserPipe],
  imports: [BrowserModule, CoreModule, HelloFrameworkModule]
})
export class AppModule {}

您的输出将如下所示：

Brolly
Goku

因此，在您的代码示例中，这就是它的外观：

// Your HTML would roughly look like this:
<mat-accordion>
  <mat-expansion-panel class="content" *ngFor="let app of appointments, let i = index">
    <mat-expansion-panel-header *ngFor="let user of users | filterUser: app.UserId">
      <mat-panel-title>Image: </mat-panel-title>
      <mat-panel-title>Client: {{user?.ContactId}}**</mat-panel-title>
      <mat-panel-title>Location: {{this.currentLocation}}</mat-panel-title>
      <mat-panel-title>Date: {{app.StartDate| date : 'MM-dd-yyyy'}}</mat-panel-title>
      <mat-panel-title>Time: {{app.StartDate| date : 'hh:mm'}}</mat-panel-title>
      <i class="material-icons-outlined" style="align-self: end">expand_more</i>
    </mat-expansion-panel-header>
    <mat-panel-description>
      <p>Desc: {{app.Description}}</p>
    </mat-panel-description>
  </mat-expansion-panel>
</mat-accordion>

// Your pipe would need modifying slightly as your using an object:
export class FilterUserPipe implements PipeTransform {
  transform(users: string[], filterUserId: string): any {
    if (!users || !filterUserId) {
      return users;
    }

    return users.filter(user => user.UserId === filterUserId);
  }
}

推荐阅读