Json 角度，使用ngIf、async和Observable等待数据准备好显示内容时出现问题

我是个新手，我被卡住了。我似乎无法让它发挥作用，我想我只是在如何实现可观察性方面犯了一些错误。目前，我使用一个本地json文件作为数据源，但在我的主项目中，我将连接到一个外部API。我已经把所有的东西都去掉了，使它尽可能的简单，但仍然没有运气

这里是campaign.component.ts

    import { Component, OnInit } from '@angular/core';

    import { Observable } from 'rxjs';

    import { CampaignService } from '../campaign.service';

    @Component({
      selector: 'app-campaign',
      templateUrl: './campaign.component.html',
      styleUrls: ['./campaign.component.css']
    })
    export class CampaignComponent implements OnInit {

    $campaign: Observable<any>;

      constructor(
        private campaignService: CampaignService
      ) {}

      ngOnInit(): void {
        this.getCampaign();
      }

      getCampaign(): void {
        this.campaignService.getCampaign().subscribe((data) => {
          this.$campaign = data;
          console.log(this.$campaign);
        });
      }
    }

从'@angular/core'导入{Component，OnInit}；
从“rxjs”导入{Observable}；
从“../campaign.service”导入{CampaignService}；
@组成部分({
选择器：“应用程序活动”，
templateUrl:“./campaign.component.html”，
样式URL:['./campaign.component.css']
})
导出类组件实现OnInit{
$活动：可观察；
建造师(
私人活动服务：活动服务
) {}
ngOnInit（）：void{
这个.getCampaign（）；
}
getCampaign（）：void{
this.campaign.getCampaign（）.subscribe（（数据）=>{
此.$campaign=数据；
console.log（这个$campaign）；
});
}
}

下面是模板html，campaign.component.html

    <div *ngIf="($campaign | async) as campaign; else loading">
    <!--this never loads-->
      {{campaign.shortName}}
    </div>

    <ng-template #loading>
    <!--this is all I see-->
      Loading stuff in ngIf...
    </ng-template>

    <br>
    <br>
    <!--this works so I know the data loads and that my json file is formatted correctly-->
    <p>Outside of ngIf works: {{$campaign.shortName}}</p>

{{campaign.shortName}
正在加载ngIf中的内容。。。




ngIf工作之外：{{$campaign.shortName}

这是服务，campaign.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
    import { Observable, of } from 'rxjs';
    import { map} from 'rxjs/operators';

    const endpoint = 'assets/api.json';

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };

    @Injectable()
    export class CampaignService {

      constructor(private http: HttpClient) {}

      private extractData(res: Response) {
        let body = res;
        return body || { };
      }

      getCampaign(): Observable<any> {
        const url = endpoint;
        console.log(url);
        return this.http.get(url).pipe(
          map(this.extractData));
      }

    }

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient，HttpHeaders，HttpErrorResponse}；
从'rxjs'导入{可观察的}；
从“rxjs/operators”导入{map}；
const endpoint='assets/api.json'；
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”
})
};
@可注射（）
出口类服务{
构造函数（私有http:HttpClient）{}
私有数据（res:Response）{
让body=res；
返回体| |{}；
}
getCampaign（）：可观察{
constURL=端点；
console.log（url）；
返回此.http.get（url）.pipe(
地图（这个数据）；
}
}

谢谢你花时间帮我

  getCampaign(): void {
    this.campaignService.getCampaign().subscribe((data) => {
      this.$campaign = data;
      console.log(this.$campaign);
    });
  }

上面将数据值分配给属性

this.$campaign

，但您已将该属性声明为可观察属性

<div *ngIf="($campaign | async) as campaign; else loading">
<!--this never loads-->
  {{campaign.shortName}}
</div>

或者，如果订阅并分配数据，则不必使用

async

<div *ngIf="campaign; else loading">
<!--this never loads-->
  {{campaign.shortName}}
</div>

<p>Outside of ngIf works: {{campaign?.shortName}}</p>

{{campaign.shortName}
ngIf工作之外：{{campaign？.shortName}

欢迎来到stackoverflow。您的问题包含几个与可观察对象和异步管道相关的问题，很难提供一个正确的答案。我唯一能想到的就是为您提供一个关于如何使用异步管道的教程。你可以在这里找到修改过的版本-@cgTag，我选择使用你的替代建议，完全删除

async

，一切都很好。@C.Lightner如果这解决了你的问题，那么你能接受答案吗。

<p>Outside of ngIf works: {{($campaign | async)?.shortName}}</p>

  constructor(private campaignService: CampaignService) {
      this.$campaign = campaignService.getCampaign(); 
  }

<div *ngIf="campaign; else loading">
<!--this never loads-->
  {{campaign.shortName}}
</div>

<p>Outside of ngIf works: {{campaign?.shortName}}</p>