Angular5はHTMLへのインターフェースオブジェクトを表示できません

私のサーバーは私にこのようなjsonを与えます。

[
{
    "userId": 11,
    "positionId": 2,
    "emailAddress": "[email protected]",
    "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;
}

インターフェースを使用しているからですか？内部にインターフェイス配列を持つインターフェイスを使用する別の同様のページがありますが、機能します。