javascript - HTML 不显示来自 API 的数据，但在 .ts 文件的控制台中显示

Question

我成功地从我的 API 中获取了数据，并且可以在控制台日志中看到它。这是该数据的副本：

[
    {
        "id": "10950",
        "name": "Name One",
        "adress": "Some street 3",
        "location": "City 2"
    },
    {
        "id": "10951",
        "name": "Name Two",
        "adress": "Some street 2",
        "location": "City 3"
    }

]

但是请听听：当我一开始想用 HTML 显示这些数据时，它并没有显示出来。然后我单击同一应用程序中的另一个页面（另一条路线）并返回到这条路线，所有内容都以 HTML 显示。我很困惑，所以我制作了一个具有 (click)="onInit()" 的按钮，当我单击它时，它会显示所有内容。但这当然不好，我想立即显示数据。

不知道这是否有帮助，但我发现即使我只是打开 DevTools，它也会以 html 格式显示数据。当我关闭时，HTML 数据仍然显示。换句话说，除了我想要的时候，所有的东西都会显示——就在页面加载的时候。

以下是一些我认为可以提供帮助的片段：

//this is a class that gets data in loadData()
export class PocetnaStranicaComponent implements OnInit, OnDestroy {
    router: Router;
    sub!: Subscription;
    poslovnice: PoslovnicaModel[] = [];

    constructor(private productService: APIService,
        private route: ActivatedRoute) {
        }

    ngOnInit() {
        this.loadData();
    }

    ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    loadData(){
        this.sub = this.productService.getPoslovniceListSve().subscribe(response=>{
            this.poslovnice = response;
            console.log(this.poslovnice);
        });
    }
}

这是导致问题的html部分：

<div>
    <h1 class="poslovnica-title">POSLOVNICE</h1>
    <!--<button (click)="ngOnInit()">Prikaži</button>-->
</div>
<div class="poslovnica-box" *ngFor="let poslovnica of poslovnice" routerLink="poslovnica/{{poslovnica.id}}">
    <p class="poslovnica-text">POSLOVNICA</p>
    <h1 class="poslovnica-ime-text">{{poslovnica.name}}</h1>
</div>

在 api 服务中：

getPoslovniceListSve(): Observable<PoslovnicaModel[]> {

        let myUrl: string = API_URL + '/poslovnica/list';
    
        return this.http.get<PoslovnicaModel[]>(myUrl, this.httpUtils.getHTTPHeader());
    }

我尝试了数百万个答案——从异步管道到“？” 运营商，*ngIf="poslovnice" 等，但它没有给出任何结果。我很困惑为什么会发生这种情况，并感谢您提供的每一个帮助。

标签： javascriptangulartypescript

Answer 1

虽然我很想弄清楚这个问题的根源（可能是更改检测策略设置），但我想推荐以下策略。您说您尝试使用async管道，但我想提供一个完整的示例。此外，它还显示了您可以减少多少样板。

组件 TS

export class PocetnaStranicaComponent {
  poslovnice$: Observable<PoslovnicaModel[]>;

  constructor(
    private productService: APIService,
    // Not sure why you need these next two items, but I added them anyway
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.poslovnice$ = this.productService.getPoslovniceListSve();
  }
}

组件 HTML

<div>
    <h1 class="poslovnica-title">POSLOVNICE</h1>
</div>
<div class="poslovnica-box" *ngFor="let poslovnica of poslovnice$ | async" routerLink="poslovnica/{{poslovnica.id}}">
    <p class="poslovnica-text">POSLOVNICA</p>
    <h1 class="poslovnica-ime-text">{{poslovnica.name}}</h1>
</div>