Как отобразить каждый компонент в массиве с помощью цикла ngfor - PullRequest
Новая
       20

Как отобразить каждый компонент в массиве с помощью цикла ngfor

1 голос
/ 21 октября 2019

Я настраиваю страницу для хранения набора данных, введенных пользователем, компонент user-info, содержит массив из n других компонентов, называемых semester-info.

У меня есть ngfor цикл, проходящий через массив Components и пытающийся отобразить их все. Вместо этого просто отображается текст Object object. У меня работает компонент, и если я вместо этого сделаю

<app-empty-term id = "1" semsester={{semesterCount}} startYear={{currentUserYear}} term ={{currentUserTerm}} class="card">

Он отображается так, как ожидалось, поэтому я знаю, что компонент работает, как и ожидалось.

Я уже убедилсячто элементы добавляются в мой массив терминов, и это правильно, и если я сделаю что-то вроде

{{element.name}}

, я получу ожидаемый ответ для каждого компонента в массиве.

Я провел кучу исследований и мне не повезло, что заставляет меня задуматься о том, возможно ли это или мне следует подойти к этому по-другому 

<div id="sampleContainer" class="card-container" *ngFor="let element of terms">
        <div>{{element}}</div>
    <!-- <app-empty-term  id = "1" semsester={{semesterCount}} startYear= {{currentUserYear}} term ={{currentUserTerm}} class="card"></app- empty-term> -->
    </div>

Закомментированная часть этого кода является несколько примером того, что я ожидал. В этом случае, если это не закомментировано, будет n пустых компонентов app-term для массива терминов размера n, однако они не связаны с моимтермин массив, так что если я попытаюсь получить доступ к их данным, ожидаемых данных там не будет

Я ожидал, что компонент будет отображаться n раз, однако это просто отображение текстового объекта Object ntРедакторы IME.

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

В идеале на вашем EmptyTermComponent должно быть свойство @Input. Примерно так: 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-empty-term',
  templateUrl: './empty-term.component.html',
  styleUrls: ['./empty-term.component.css']
})
export class EmptyTermComponent implements OnInit {

  @Input() term: any;

  constructor() { }

  ngOnInit() {
  }

}

И тогда вы передадите term в качестве Входа в родительский компонент:

Примерно так: 

<div id="sampleContainer" class="card-container" *ngFor="let term of terms">
    <!-- <div>{{element}}</div> -->
    <app-empty-term
    [term]=term
    class="card">
  </app-empty-term>
</div>

Предполагая, что у вас есть массив terms, который выглядит примерно так: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  terms = [
    { id: 1, semesterCount: 1, startYear: 2021, term: 1, name: 'Term 1' },
    { id: 2, semesterCount: 2, startYear: 2022, term: 2, name: 'Term 2' },
    { id: 3, semesterCount: 3, startYear: 2023, term: 3, name: 'Term 3' },
    { id: 4, semesterCount: 4, startYear: 2024, term: 4, name: 'Term 4' },
  ];
}

Вот вам Рабочий пример StackBlitz для вашей ссылки.

0 голосов
/ 21 октября 2019

если ваш element в каждой итерации равен component, то это должно работать как положено, вы можете узнать больше о *ngComponentOutlet здесь ngComponentOutlet 

<div id="sampleContainer" class="card-container" *ngFor="let element of terms">
    <ng-container *ngComponentOutlet="element"></ng-container>
</div>
...