Angular 5 无法将界面对象显示为 html

Posted

技术标签:

【中文标题】Angular 5 无法将界面对象显示为 html【英文标题】:Angular 5 cannot display interface object to html 【发布时间】:2018-07-02 14:30:01 【问题描述】:

我的服务器给了我这样的 json。

[

    "userId": 11,
    "positionId": 2,
    "emailAddress": "ada.lovelace@gmail.com",
    "username": "adalovelace",
    "createdBy": 1,
    "createdAt": "2018-01-06 13:43:18",
    "updatedBy": null,
    "updatedAt": "2018-01-06 13:43:18",
    "profile": 
        "userProfileId": 1,
        "userId": 11,
        "displayName": "adalovelace",
        "location": null,
        "title": null,
        "imageUrl": null,
        "about": null,
        "threadCount": 0,
        "threadPostCount": 1,
        "threadKarma": 0,
        "threadPostKarma": 2
    

]

我的.ts文件是这样的,我去掉了很多不相关的代码。

import  UserService  from '../_shared/services/user.service';
import  UserInterface  from '../_shared/interfaces/user.interface';

export class ProfileComponent implements OnInit, OnDestroy 

private currentUser = <UserInterface>;

public username: string;

public userProfile = <UserInterface>;

ngOnInit() 
    this.userSubcription = this.userService.showProfile(this.username)
        .subscribe((userProfile: UserInterface) => 
            this.userProfile = userProfile;
            console.log(this.userProfile); // has value!
        , error => 
            console.log(error);
        );



.html 文件

<section id="profile">
<div class="container">
    <div class="row">
        <div class="col">
            <h2>userProfile.userId</h2>
            <h2>userProfile.profile.dsplayName</h2>
        </div>
    </div>
</div>

它没有显示任何东西。 userProfile.profile.dsplayName 甚至给了我错误。它说未定义。

用户界面如下所示。

import  UserProfileInterface  from './user-profile.interface';

export interface UserInterface 
userId: number;
token: string;
username: string;
emailAddress: string;
createdBy: string;
createdAt: string;
updatedBy: string;
updatedAt: string;

positionId: number;
password: string;
confirmPassword: string;

profile: UserProfileInterface;

是不是因为我用的是界面?我有另一个类似的页面,它使用内部接口数组的接口,但它可以工作。

【问题讨论】:

【参考方案1】:

您的服务器返回 json 数组。试试下面的代码 sn-p

<section id="profile">
<div class="container">
    <div class="row">
        <div class="col">
            <h2>userProfile[0].userId</h2>
            <h2>userProfile[0].profile.dsplayName</h2>
        </div>
    </div>
</div>

【讨论】:

以上是关于Angular 5 无法将界面对象显示为 html的主要内容,如果未能解决你的问题,请参考以下文章

使用Angular2中的接口将对象推送到新数组中

Angular1组件通讯方式总结

Typescript / Angular2:将 JSON 转换为与 Observable 和 JSONP 接口

如何循环遍历对象数组中的对象数组并使用 Angular/Ionic 在我的 HTML 中显示?

打字头没有填充角度用户界面

无法将对象作为参数传递