Saya sangat baru di Angular dan saya tidak bisa menyelesaikan masalah ini. Saya sedang mengerjakan situs yang dirancang oleh orang lain dan saya harus menampilkan tiga kartu di bawah spanduk di halaman bernama api lab. Jadi saya membuat komponen api-lab, tempat saya menginisialisasi daftar yang ingin saya tampilkan.
Ini adalah hal penting di 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 {}
Ini adalah 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>
Saat saya memuat halaman tanpa ngFor, saya dapat melihat banner secara normal. Saat saya mencoba menampilkan kartu dengan ngFor, seluruh situs menjadi kosong. Seperti yang saya katakan, saya sangat baru di Angular tetapi saya harus menyelesaikan masalah ini agar dapat melanjutkan. Jika Anda memerlukan detail apa pun, saya dengan senang hati akan memberikannya kepada Anda. Terima kasih telah membaca dan membantu saya.