किसी अन्य ऑब्जेक्ट को खींचने के लिए ऑब्जेक्ट पैरामीटर का उपयोग करना

आपके डेटा के माध्यम से फ़िल्टर करने के लिए आपके बाद एक pipe क्या है। आइए एक सरल उदाहरण के माध्यम से चलते हैं।

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