在html页面中显示数据需要时间

Question

当用户点击用户列表中的查看按钮时，我想在不同的页面上显示特定用户的数据。
我有获取数据表单 API。当我单击用户列表中的查看按钮时，我会重定向到查看页面并在控制台表单 API 中获取所有用户数据。
但是用户数据不显示在视图 html 页面中。
以下是我尝试过的代码
组件代码 ts 文件

mediaData: any = {};  
getMediaType() {
let media_id = this.media_id;
this.service.getSingleMediaType(media_id).subscribe(
  res => {
    this.mediaData = res[0];
    console.log(this.mediaData);
  },
  err => {
    if (err instanceof HttpErrorResponse) {
      if (err.status == 401) {
        this.router.navigate(['/others/signin']);
      }
    }
  }
);
}  

以下是我的html代码

<div class="pb-1">
    <div>
<mat-label>Upin</mat-label></div>
         <mat-form-field>
             <input matInput readonly value="{{ mediaData ? mediaData?.upin: ''}}">
         </mat-form-field>   
    </div>        
 <div class="pb-1">
    <div>
<mat-label>Bid Type</mat-label></div>
        <mat-form-field>
           <input matInput readonly value="{{ mediaData ? mediaData?.type: ''}}">
        </mat-form-field>
  </div>  

以下是服务功能

getSingleMediaType(media_id) {
        return this.http.get<any>(`${this.apiUrl}getMediaType/${media_id}`);
 }  

请为此帮助我。在此先感谢您。
P.S：有些时间数据会在一段时间后显示，但有些时间不会显示。当我在查看页面上打开控制台登录时，会显示用户数据。我不明白这是怎么回事。

Answer 1

好的，我猜你的响应数据看起来像这样

class MediaData {
    upin: string;
    type: string;
}

您应该使用 Angular 表单，我更喜欢使用响应式表单，但您也可以使用模板驱动的表单（它会更接近您已经完成的操作）。

正确初始化您的 mediaData 对象：

mediaData: MediaData = {
    upin: '',
    type: '',
};

这意味着您必须将类型添加到 http 请求中。

getSingleMediaType(media_id) {
    return this.http.get<MediaData>(`${this.apiUrl}getMediaType/${media_id}`);
}

getMediaType() {
    this.service.getSingleMediaType(this.media_id).subscribe(
      (res: MediaData[])=> {
        this.mediaData = res[0];
        console.log(this.mediaData);
      },
      err => {
        if (err instanceof HttpErrorResponse) {
          if (err.status == 401) {
            this.router.navigate(['/others/signin']);
          }
        }
      }
    );
}  

然后使用表格：

<div class="pb-1">
    <div>
        <mat-label>Upin</mat-label>
    </div>
    <mat-form-field>
        <input matInput readonly  [(ngModel)]="mediaData.upin" name="upin" id="upin">
    </mat-form-field>   
</div>        
<div class="pb-1">
    <div>
        <mat-label>Bid Type</mat-label>
    </div>
    <mat-form-field>
       <input matInput readonly [(ngModel)]="mediaData.type" name="type" id="type">
    </mat-form-field>
</div>