Директива 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