javascript - Angular 2 - 查看单个数据记录

Question

我是 Angular 新手，所以我无法弄清楚如何针对我想要完成的任务提出问题，但就这样了。

我有一个组件正在从服务中获取单个用户记录。然后我想在我的用户界面上显示这些用户详细信息。在我的代码的其他部分，它们始终是多个记录，因此我使用了 *ngFor 并循环访问数据数组。然而，由于这只是一个结果，我不太确定如何实现这一点。

组件:

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

}

服务:

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

界面:

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

服务结果:

[  
   {  
      "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"
   }
]

在我的组件 HTML 中，我尝试了 {{record.FirstName}} 但收到 ViewRecordComponent.html:16 ERROR TypeError: Cannot read property 'FirstName' of undefined< 的错误.

由于这不是一组数据结果，因此我不知道 *ngFor 如何适用于用例。

我假设由于我的组件将数据存储在 record 对象中，我应该能够从 UI 访问该数据？ console.log 显示所有正确的数据点。

如何在组件 HTML 中引用用户 FirstName？希望我至少走在正确的道路上。

Answer 1

您的响应似乎是一个带有对象的数组，因此 record.FirstName 不存在，但 record[0].FirstName 存在。

当涉及到 View 时，请记住使用安全导航运算符或 *ngIf ，这样您就不会遇到 DeborahK 提到的未定义问题。 Observable type error: cannot read property of undefined

此外，还有一些关于如何在 Angular 中处理 http 的建议...我会做如下的事情...

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

和组件:

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

但这完全取决于你:)