Angular 模板尝试显示未从服务器接收的数据

我在项目中使用angular 10

在OnInit函数中，我进行http调用以从服务器获取数据，并将其放入名为desc的类属性：

  ngOnInit(): void {
    
    this.myService.getData(id).subscribe(response => {this.desc = response.results })
    
  }
  

下面是如何在组件中声明desc：

desc: Desc;

以下是描述定义：

    export interface Desc {
        codeName: string;
        mapId: string;
        roster: string;
    } 
  

在模板中，我显示了从服务器接收的desc的codeName priproperty：

  <div class="level-left">
        <h1 class="has-text-info"> Your Code: {{ desc.codeName}} </h1>
   </div> 

似乎DOM试图在从服务器接收数据之前访问并显示desc变量的代码名值。 我知道为了防止这种情况，我可以使用ngIf指令检查desc变量是否为null，

---

但是使用ngIf是一个好方法吗？

ngIf是一个坏的选择，因为它会在响应到来之前隐藏html，例如，在出现错误时，您不希望有一个隐藏的html。您可以尝试使用安全的导航？

<h1 class="has-text-info"> Your Code: {{ desc?.codeName}} </h1>

您的代码：{{desc？.codeName}

如果您愿意，也可以使用异步管道，无需订阅和取消订阅

desc: Observable<Desc>;
this.desc = this.myService.getData(id).pipe(map(data => data.results));

desc：可见；
this.desc=this.myService.getData（id）.pipe（map（data=>data.results））；

您的代码：{{（desc | async）？.codeName}

感谢您的帖子，您认为创建与组件相关的服务、将myService移动到创建的服务并在加载上述组件之前触发它是一个好主意吗？这个组件是子组件，所以我可以从父组件调用myService。好的，这是另一个主题，如果它是子组件，那么最好将它用作表示组件，只是为了显示数据。您可以通过输入将数据传递给它，不要忘记使用changeDetection:ChangeDetectionStrategy.OnPush提高性能

desc: Observable<Desc>;
this.desc = this.myService.getData(id).pipe(map(data => data.results));

<h1 class="has-text-info"> Your Code: {{ (desc | async)?.codeName}} </h1>