使用对象参数拉另一个对象
Using Object Parameter to pull another Object
重新自我介绍 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>
您需要 pipe
过滤您的数据。让我们看一个简单的例子。
A pipe
看起来像这样 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);
}
}
重新自我介绍 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>
您需要 pipe
过滤您的数据。让我们看一个简单的例子。
A pipe
看起来像这样 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);
}
}