คำสั่ง ngfor ทำงานไม่ถูกต้อง

ฉันยังใหม่กับ Angular และฉันไม่สามารถแก้ไขปัญหานี้ได้ ฉันกำลังทำงานในไซต์ที่ออกแบบโดยผู้อื่น และฉันต้องแสดงการ์ดสามใบใต้แบนเนอร์ในหน้าเว็บที่เรียกว่า api lab ดังนั้นฉันจึงสร้างส่วนประกอบ 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 แต่ฉันต้องแก้ไขปัญหานี้เพื่อดำเนินต่อไป หากคุณต้องการรายละเอียดใด ๆ ฉันยินดีที่จะให้คุณ ขอบคุณที่อ่านและช่วยฉัน


person Redriel    schedule 14.11.2019    source แหล่งที่มา


คำตอบ (1)


สิ่งนี้คือคุณไม่ได้ปิดแท็ก div ภายในไฟล์ api-lab.component.html

เพิ่งอัปเดตโค้ดของคุณและเพิ่ม 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> 
person Touqeer Aslam    schedule 14.11.2019