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

为此，请帮助我。谢谢你。
PsS ：一段时间后会显示一些时间数据，但有时会不显示。当我打开控制台登录视图页面时，会显示用户数据。我不明白这是怎么回事。

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>

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

1 个答案: