Генерация дочерних компонентов из ngFor в Angular 2

Question

Генерация дочерних компонентов из ngFor в Angular 2

0

Можно ли создать независимые дочерние компоненты из ngFor итерации в Angular 2?

Я делаю приложение Quiz со структурой, где один компонент Quiz имеет несколько Categories, а одна категория имеет несколько Questions.

Угловое будет генерировать форму из Quiz, полученной из REST api, где пользователь может перемещаться между различными категориями вопросов и, наконец, сохранять частичную или представлять полную форму.

Я набросал следующую псевдоструктуру для шаблона приложения:

<html>
  <form>
    <category>
      <question *ngFor="let question of questions" />
    <category>
    <navigate/>
  </form>
</html>

Quiz component есть список категорий и ссылка на активную категорию. Category component есть привязка ввода для отражения активной категории Quiz. Category есть список вопросов, которые я хочу инкапсулировать в отдельный компонент. Таким образом, я перебираю список вопросов и создаю вопросительный тег.

Теперь проблема заключается в том, как я заполняю Question component для каждого тега в соответствии с объектом вопроса, создающим этот тег? Возможно ли это, или я должен объединить шаблон вопроса с категорией?

Tuomas Toivonen 28 май 2016, в 15:48

Источник

0

Вы сможете помочь мне по запросу, который я разместил? stackoverflow.com/questions/54016062/… Наши вопросы выглядят аналогично. Я думаю, вы бы прошли через подобные проблемы.
Renjith 04 янв. 2019, в 02:02

Теги:

angular

javascript

html

angularjs

model-view-controller

3 ответа

0

Ваш вопрос немного расплывчатый. мне кажется, что ваш компонент категории должен получить из списка серверов список вопросов с помощью ngOnInit hook.

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Avi 28 май 2016, в 16:01

0

Я не уверен, полностью ли я понимаю ваш вопрос, но если ваша категория содержит список вопросов, вы должны сделать свой ngFor или я предлагаю ng-repeat в категории

<html>
  <form>
    <category ng-repeat="question in $ctrl.questions">
      <question/>
    <category>
    <navigate/>
  </form>
</html>

Где $ ctrl должен ссылаться на контроллер вашей категории.
Затем вы можете использовать переменную вопроса внутри этого тега

turoni 28 май 2016, в 12:27

2

Вопрос об Angular 2.
Mark Rajcok 28 май 2016, в 23:40

Ещё вопросы

Вы сможете помочь мне по запросу, который я разместил? stackoverflow.com/questions/54016062/… Наши вопросы выглядят аналогично. Я думаю, вы бы прошли через подобные проблемы.

Mark Rajcok · Accepted Answer · 2016-05-28T22-29-00.000Z

Передайте объект Question компонент Question используя свойство ввода. Позвольте называть это свойство ввода qObj:

<question *ngFor="let questionObj of questions" [qObj]="questionObj"></question>

В компоненте " Question объявите свойство ввода:

import {Component, Input} from '@angular/core';
@Component({ 
   selector: 'question',
   template: '<div>{{qObj.question}}'  // I'm assuming it has a question property
})
export class Question {
   @Input() qObj:Object;
}