मैं अपनी कोणीय चटाई तालिका में php mysql से डेटा दिखाना चाहता हूं। मैं कोणीय सीएलआई 8.1.0.1 का उपयोग कर रहा हूँ। नीचे मेरा कोड है, क्या कोई मदद कर सकता है कि वास्तविक त्रुटि क्या है। मैंने PHP और MYSQL के माध्यम से बाकी एपीआई बनाया है, और जब मैं डाकिया पर हिट करता हूं तो यह डेटाबेस रिकॉर्ड को जेसन प्रारूप में देता है। लेकिन मैं इसे अपनी मैट टेबल पर नहीं दिखा पा रहा हूं।

api.service.ts

    import { Injectable, Output,EventEmitter } from '@angular/core';
    import { map } from 'rxjs/operators';
    import { HttpClient } from '@angular/common/http';
    import { Users } from './users';
    import { Observable } from 'rxjs';
    import { Displayvendor } from './adminpanel/home/vendor-action/displayvendor';

    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {          
      private static URL = 'http://localhost/repos/Sportaz-repo/VaamozWeb/VaamozBusiness/RestApi/VaamozStore/AdminStore/angular_admin/php/index.php';

      constructor(private httpClient : HttpClient) { }          
      userList(): Observable<Displayvendor[]> 
      {
        return this.httpClient.get(ApiService.URL).pipe(map((response: {data: Displayvendor[]}) => response.data));
      }         
    }

विक्रेता-action.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource, MatPaginator} from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { ApiService } from 'src/app/api.service';
import { Displayvendor } from './displayvendor';

@Component({
  selector: 'app-vendor-action',
  templateUrl: './vendor-action.component.html',
  styleUrls: ['./vendor-action.component.css']
})
export class VendorActionComponent {

  displayvendors : Displayvendor[];
  constructor(private router:Router,public apiService:ApiService){}

  ngOnInit()
  {
    this.apiService.userList().subscribe(this.assignUsers.bind(this));
  }

  assignUsers(displayvendors:Displayvendor[])
  {
    this.displayvendors=displayvendors;
  }        
}

विक्रेता-action.component.ts

<div class="purchases-style">
    <div>
        <table mat-table [dataSource]="displayvendors" class="mat-elevation-z1">
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="changeColumn">
            <th mat-header-cell *matHeaderCellDef> Change Column </th>
            <td mat-cell *matCellDef="let element"> {{element.changeColumn}} </td>
        </ng-container>

        <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef> Change Type </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
        </ng-container>

        <ng-container matColumnDef="timestamp">
            <th mat-header-cell *matHeaderCellDef> Timestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.timestamp}} </td>
        </ng-container>

        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['id','changeColumn','type','timestamp','status']"></tr>
        <tr class="rowhover" (click)="displayData(row)" mat-row *matRowDef="let row; columns: ['id','changeColumn','type','timestamp','status']"></tr>
        </table>

         <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" class="mat-elevation-z1">
         </mat-paginator>
     </div>
     <router-outlet></router-outlet>
</div>

डिस्प्लेवेंडर.ts

export interface Displayvendor {
    id: number;
    changeColumn: string;
    type: string;
    timestamp: string;
    status: string;
  }
2
Manisha 6 मार्च 2020, 13:44
इसके साथ प्रयास करें: this.apiService.userList().subscribe(displayvendors=> { this.displayvendors=displayvendors; });
 – 
BartoszTermena
6 मार्च 2020, 13:52
और अपने html से async पाइप हटा दें
 – 
BartoszTermena
6 मार्च 2020, 13:53
काम नहीं किया। कोई परिणाम नही
 – 
Manisha
6 मार्च 2020, 13:56
क्या आपने | async को html : <table mat-table [dataSource]="displayvendors | async" ... से हटा दिया था?
 – 
BartoszTermena
6 मार्च 2020, 14:00
हाँ मैंने हटा दिया
 – 
Manisha
6 मार्च 2020, 14:01

2 जवाब

यदि आप Async पाइप के साथ ऑब्जर्वेबल ऑब्जेक्ट से एक सरणी का उपयोग करना चाहते हैं तो अपना कोड इसमें बदलें:

    export class VendorActionComponent {

      displayvendors : any;
      constructor(private router:Router,public apiService:ApiService){}

      ngOnInit()
      {
        this.displayvendors = this.apiService.userList();
      }
   ...
    }
0
BartoszTermena 6 मार्च 2020, 13:55

इसे अपने घटक में जोड़ें

import { MatTableDataSource } from '@angular/material';

वैरिएबल MatTableDataSource . प्रकार का होना चाहिए

displayvendors: MatTableDataSource<any>

और एपीआई कॉल से प्राप्त सरणी को इस तरह अपने displayvendors पर असाइन करें।

this.apiService.userList().subscribe(displayvendors=> { this.displayvendors = new MatTableDataSource(displayvendors); })

यह मेरे लिए काम किया। विचार अपने सरणी को मैट-टेबल संरचना में परिवर्तित करना है जिसके बाद कोणीय सामग्री होती है

0
Neeraj Kamat 6 मार्च 2020, 14:46