एंगुलर से अपना परिचय देते हुए, एक प्रश्न पूछना चाहता था। मैं अपने क्षेत्रों में अपॉइंटमेंट डेटा खींच रहा हूं, और मुझे अपॉइंटमेंट ऑब्जेक्ट में "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>
0
S-Grace 20 अगस्त 2021, 04:17
बस यह पुष्टि करने के लिए कि आप एक विशिष्ट उपयोगकर्ता नाम प्रदर्शित करने के लिए UserId (उपयोगकर्ताओं की अपनी सरणी के माध्यम से जांचने के लिए) के आधार पर HTML प्रस्तुत करना चाहते हैं?
 – 
VVS
20 अगस्त 2021, 10:57

1 उत्तर

सबसे बढ़िया उत्तर

आपके डेटा के माध्यम से फ़िल्टर करने के लिए आपके बाद एक 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);
  }
}
0
VVS 20 अगस्त 2021, 13:35
शुक्रिया! लेकिन अब संपर्क आईडी मुझे एक अनसुलझे चर त्रुटि दे रहा है
 – 
S-Grace
20 अगस्त 2021, 19:33
क्या आपका users ऑब्जेक्ट एक string सरणी है, यदि नहीं, तो pipe के अंदर ट्रांसफ़ॉर्म में प्रकार को string[] से yourType[] में बदलें। क्या यह संभव है कि आप मेरे लिए स्टैकब्लिट्ज पर कोड को दोबारा जांचें कि क्या यह काम नहीं करता है?
 – 
VVS
20 अगस्त 2021, 21:32
हां, इसलिए मुझे लगता है कि समस्या दोनों उपयोगकर्ता हैं और अपॉइंटमेंट ऑब्जेक्ट एरे हैं, मुझे केवल उन दोनों के लिए उपयोगकर्ता आईडी की जांच करने की आवश्यकता है और उपयोगकर्ता के पहले और अंतिम नाम को उपयोगकर्ता आईडी से मेल खाने वाले उपयोगकर्ता को खींचने की आवश्यकता है। यहां स्टैकब्लिट्ज stackblitz.com/edit/angular- ivy-cgpsbv?file=src/app/…
 – 
S-Grace
21 अगस्त 2021, 00:21
मैंने आपका उदाहरण देखा और यह ठीक काम करता है, कोई contactId परिभाषित भी नहीं है? क्या आप इसे परिभाषित करना भूल गए? इसके अलावा आपके स्टैकब्लिट्ज उदाहरण के साथ, क्योंकि सामग्री पैकेज स्थापित नहीं है, यह प्रस्तुत नहीं करेगा। इसलिए मैंने आपके द्वारा html में डाली गई हर चीज को कॉपी किया और div टैग से बदल दिया और यह सभी डेटा को अपेक्षित रूप से दिखाता है।
 – 
VVS
21 अगस्त 2021, 00:32
मैंने संपर्क आईडी को पहले नाम और अंतिम नाम में बदल दिया। आपकी मदद के लिए धन्यवाद, मुझे लगता है कि यह स्टैकब्लिट्ज में काम कर रहा है लेकिन अभी भी मेरे में नहीं है। मुझे अपने एपीआई के साथ कोई समस्या हो सकती है। शुक्रिया
 – 
S-Grace
23 अगस्त 2021, 19:05