ngfor 指令无法正常工作

Question

我对 Angular 很陌生，我无法解决这个问题。 我正在开发一个由其他人设计的网站，我必须在名为 api 实验室的页面中的横幅下显示三张卡片。 所以我创建了 api-lab 组件，在这里我初始化了一个我想要显示的列表。

这是 api-lab.component.ts 中的重要内容：

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

@Component({
  selector: 'app-api-lab',
  templateUrl: './api-lab.component.html',
  styleUrls: ['./api-lab.component.scss']
})
export class ApiLabComponent implements OnInit {
  apiList: Array<ApiCategory>;
  apiTitle: string;
  apiDescription: string;
  landingBackgroundImage: string;
  accountInformationImage = '/assets/images/home/box_account-information.jpg';
  accountInformationIcon = '/assets/images/home/accountInformation_u.png';

  constructor() {
    ...
    });
  }
  ngOnInit() {
    this.createApiCAtegoryList();
  }
...
  createApiCAtegoryList() {}
}
...
class ApiCategory {}

这是 api-lab.component.html：

<div class="row">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <hero-top [title]=apiTitle [description]=apiDescription [backgroundImage]=landingBackgroundImage
        [textSide]="'right'" [buttonEnabled]=true [buttonText]="'Get started'" [buttonLinkToPage]="'/get-started'">
    </hero-top>
  </div>
</div>
<div class="row mt-4">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <div class="row no-guttter">

HERE:
        <div class="col-md-8 " *ngFor="let category of apiList">
            <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
              [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
    </div>
  </div>
</div>
<div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
</div>

当我在没有 ngFor 的情况下加载页面时，我可以正常看到横幅。 当我尝试使用 ngFor 显示卡片时，整个站点变为空白。 正如我所说，我对 Angular 很陌生，但我必须在 go 上解决这个问题。 如果您需要任何详细信息，我很乐意为您提供。 感谢您阅读并帮助我。

Answer 1

问题是您尚未关闭 api-lab.component.html 文件中的 div 标签。

刚刚更新了您的代码并添加了一个未关闭的 div，所以请将我的代码复制到您的文件中，这将起作用:)

如果有帮助，请不要忘记将我的问题标记为解决方案。 谢谢

  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <hero-top [title]=apiTitle [description]=apiDescription [backgroundImage]=landingBackgroundImage
      [textSide]="'right'" [buttonEnabled]=true [buttonText]="'Get started'" [buttonLinkToPage]="'/get-started'">
    </hero-top>
  </div>
</div>
<div class="row mt-4">
  <div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
    <div class="row no-guttter">

      HERE:
      <div class="col-md-8 " *ngFor="let category of apiList">
        <api-lab-category-card [image]="category.image" [icon]="category.icon" [title]="category.title"
          [description]="category.description" [buttonLink]="category.buttonLink"></api-lab-category-card>
      </div>
    </div>
  </div>
</div>
<div class="col-24 col-md-16 offset-md-4 col-xl-16 offset-xl-4">
</div>