ฉันยังใหม่กับ 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 แต่ฉันต้องแก้ไขปัญหานี้เพื่อดำเนินต่อไป หากคุณต้องการรายละเอียดใด ๆ ฉันยินดีที่จะให้คุณ ขอบคุณที่อ่านและช่วยฉัน