Arahan ngfor tidak berfungsi dengan benar

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.


person Redriel    schedule 14.11.2019    source sumber


Jawaban (1)


masalahnya Anda belum menutup tag div di dalam file api-lab.component.html.

Baru saja memperbarui kode Anda dan menambahkan div yang tidak ditutup, jadi tolong salin kode saya ke file Anda dan ini akan berfungsi :)

Tolong jangan lupa untuk menandai pertanyaan saya sebagai solusi jika itu membantu. Terima kasih

  <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