Angular 2 - Anzeigen eines einzelnen Datensatzes

Question

Ich bin neu in Angular, so dass ich Probleme habe, herauszufinden, wie ich meine Fragen für das, was ich erreichen möchte, formulieren kann, aber hier geht es.

Ich habe eine Komponente, die einen einzelnen Benutzerdatensatz von einem Dienst abruft. Ich möchte diese Benutzerdetails dann auf meiner Benutzeroberfläche anzeigen. In anderen Teilen meines Codes waren sie immer mehrere Datensätze, also habe ich *ngFor verwendet und über das Datenfeld geloopt. Da dies jedoch nur ein einziges Ergebnis ist, bin ich mir nicht sicher, wie dies zu erreichen ist.

Komponente:

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { UserRecord } from '../shared/user-record.interface'; 
import { UserService } from '../shared/user.service'; 

@Component({ 
    selector: 'app-view-record', 
    templateUrl: './view-record.component.html', 
    styleUrls: ['./view-record.component.css'] 
}) 
export class ViewRecordComponent implements OnInit { 

    private record: UserRecord[]; 
    private errorMessage: any = ''; 
    private loaded = false; 
    private RecordID: number; // User ID of who we are looking at 

    constructor(private _crudService: UserService, 
     private activatedRoute: ActivatedRoute) { } 

    ngOnInit() { 

     // Get the userID from the activated route 
     this.activatedRoute.params.subscribe((params: Params) => { 
      this.RecordID = params['id']; 
     }); 

     // Call our service and pass the userID 
     this._crudService.getRecord(this.RecordID) 
      .then(res => { 
       this.record = this._crudService.record; 
       return this._crudService.getRecord(this.RecordID); 
      }) 
      .then(res => { 
       console.log(this.record) 
       this.loaded = true; 
      }) 
      .catch(err => { console.error(err); }); 
    } 

} 

Service:

getRecord(userID: number) { 

     const headers: Headers = new Headers({ 
      "Authorization": this._frameworkService.getSessionInfo().token 
     }); 
     return new Promise((resolve, rejects) => { 
      this._http.post(this.baseUrl + '/fetchRecord', { "userID": userID }, { "headers": headers }) 
       .map(res => res.json()) 
       .subscribe((data) => { 
        if (data) { 
         this.record = data; 
        } 
        resolve(true); 
       }); 
     }); 
    } 

Schnittstelle:

export interface UserRecord { 
    RecordID: number; 
    QID: string; 
    FavoriteColor?: string; 
    FavoriteNumber?: number; 
    FavoriteActor?: string; 
    MetaInsertUTC: string; 
    MetaUpdateUTC: string; 
    FirstName: string; 
    LastName: string; 
    NTID: string; 
} 

Service-Ergebnis:

[ 
    { 
     "RecordID":"55", 
     "QID":"Q00019204", 
     "FavoriteColor":"Blue", 
     "FavoriteNumber":"6", 
     "FavoriteActor":"Bob", 
     "MetaInsertUTC":"2017-06-29 18:47:01.750", 
     "MetaUpdateUTC":null, 
     "FirstName":"Jim", 
     "LastName":"Bobs", 
     "NTID":"bobby" 
    } 
] 

In meinem Component HTML, ich habe {{record.FirstName}} versucht, aber den Fehler von ViewRecordComponent.html:16 ERROR TypeError: Cannot read property 'FirstName' of undefined erhalten.

Da dies nicht eine Reihe von Daten Ergebnisse ist, sehe ich nicht, wie *ngFor im Anwendungsfall anwendbar wäre.

Ich nahm an, dass ich, da meine Komponente die Daten im Objekt record speichert, in der Lage sein sollte, über die Benutzeroberfläche darauf zuzugreifen? Die console.log zeigt alle korrekten Datenpunkte.

Wie würde ich die Benutzer FirstName in meiner Komponente HTML referenzieren? Hoffentlich bin ich zumindest auf dem richtigen Weg.

Answer 1

Ihre Antwort scheint ein Array mit einem Objekt zu sein, also record.FirstName nicht existiert, aber record[0].FirstName tut.

Und wenn es um die Ansicht geht, denken Sie daran, entweder den sicheren Navigationsoperator oder *ngIf zu verwenden, damit Sie nicht in undefinierte Probleme wie von DeborahK erwähnt auftreten. Observable type error: cannot read property of undefined

Weiterhin nur einige Vorschläge, wie http in Eckige zu behandeln ... Ich würde

etwas wie das folgende ... tun

getRecord(userID: number) { 
    const headers: Headers = new Headers({ 
     "Authorization": this._frameworkService.getSessionInfo().token 
    }); 
    return this._http.post(this.baseUrl + '/fetchRecord', { "userID": userID }, { "headers": headers }) 
     .toPromise() 
     .then(res => res.json()[0]) // get the object only 
     .catch(err => { console.error(err); }); 
} 

und Komponente:

this._crudService.getRecord(this.RecordID) 
    .then(res => { 
     this.record = res; 
    }); 

Aber das ist völlig bis zu dir :)

Answer 2

Daten von Http abrufen ist asynchron. Das heißt, wenn die Seite zum ersten Mal angezeigt wird, sind die Daten noch nicht vorhanden.

Es gibt mehrere Möglichkeiten, dieses Problem zu beheben: „?“

Eine Möglichkeit ist, die verwenden (sichere Navigation) Betreiber: {{record?.FirstName}} Dies behandelt besser Nullen. Weitere Informationen finden Sie unter diesem Link: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Eine weitere Option ist die Verwendung von * ngIf für Ihren HTML-Code. *ngIf='record'

Wenn Ihre Seite zum ersten Mal angezeigt wird, wird kein Fehler generiert, dass der Datensatz noch nicht festgelegt wurde. Sobald die Daten abgerufen werden, wird die Bindung die Änderung bemerken und die Benutzeroberfläche entsprechend aktualisieren. Hier

ist, was eine meiner Service-Methoden wie folgt aussehen:

getProducts(): Observable<IProduct[]> { 
    return this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .catch(this.handleError); 
} 

Und hier ist der Aufruf zu diesem Dienst:

ngOnInit(): void { 
    this._productService.getProducts() 
      .subscribe(products => this.products = products, 
         error => this.errorMessage = <any>error); 
} 

Beachten Sie, dass die Zeichnung in der Komponente, die den Dienst aufruft nicht im Dienst selbst.