Как создать массив различной длины каждый раз, когда он называется

Question

Случай, над которым я сейчас работаю, я делаю запрос HTTP GET, и я получаю массив идентификаторов и данных (из json), которые до сих пор я 'успешно удалось распечатать на экране (например, <li *ngFor="#date of dates">{{date.date2}}</li>). Я хочу, чтобы этот массив использовался в другом компоненте, component2:

У меня есть еще один компонент, который показывает небольшую коробку с несколькими кнопками. Я получил его от materializecss и в настоящее время показывает статически 5 кнопок. Я могу изменить его вручную, но я хотел бы сделать это, чтобы он приспосабливался к тому, сколько ответов я получил от предыдущих компонентов. Поэтому, если я получу 3 идентификатора, я хочу, чтобы он показывал 3 варианта.

Это массив items = ['a', 2, 3, 4, 5];

, который затем используется в качестве шаблона, как это:

<div flex="50" *ngFor="#item of items"> 
        <md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)"> 
         {{ item }} <span *ngIf="exists(item, selected)">selected</span> 
        </md-checkbox> 
        </div> 

В других языках это довольно простой, но я не уверен, если это делается в угловой 2 , в html с помощью другого ngFor или как. Честно говоря, мне не хватает словарного запаса, чтобы найти, как это делается, поэтому мне очень жаль, если это слишком просто.

Это Typescript create array with loop dynamically, тем ближе у меня есть, но либо он не работает для моего дела, либо я не понимаю.

Edit: псевдо-код для того, что я хотел бы сделать:

void method(Integer items){ 
int n = items.length; 
int[] array = new int[n]; 
} 

Будучи элементы «объект» или данных или массив, который я хочу, чтобы динамически использовать во втором компоненте.

Вторым компонентом является в основном классическим абонентом, практически такой же, как эта

export class HeroListComponent implements OnInit { 
    errorMessage: string; 
    heroes: Hero[]; 
    mode = 'Observable'; 
    constructor (private heroService: HeroService) {} 
    ngOnInit() { this.getHeroes(); } 
    getHeroes() { 
    this.heroService.getHeroes() 
        .subscribe(
         heroes => this.heroes = heroes, 
         error => this.errorMessage = <any>error); 
    } 
    addHero (name: string) { 
    if (!name) { return; } 
    this.heroService.addHero(name) 
        .subscribe(
         hero => this.heroes.push(hero), 
         error => this.errorMessage = <any>error); 
    } 
} 

Но с различными данными.

Структура приложения является ... видом большой/грязной, как прямо сейчас, из-за мое отсутствие опыта, но она будет идти, как это:

src/sidenav.ts //@Component with imports of other components (including httpC) and all the relevant template, which I'll post below 
src/service.ts //@Injectable 
|src/httpC.ts //@Component 


<form> 
    <calendar></calendar> 
    <HTTPgetRequest></HTTPgetRequest> 
    <checkS></checkS> 
    <button></button> 

</form> 

И поэтому идея заключается в используйте то, что я получаю от запроса, в селектор checkS (которые представляют собой некоторые галочки, поэтому, как бы длинный массив из запроса не содержал столько ящиков)

Answer 1

В принципе у вас есть три элемента (родительский компонент , дочерний компонент и услугу). Родительский элемент извлекает список (массив) из службы и передает список вниз в дочерний компонент через @Input.

Родитель:

import { Component, OnInit } from '@angular/core'; 
import { ChildComponent } from './child-component'; 
import { MyService } from './my-service'; 

@Component({ 
    selector: 'my-app', 
    providers: [MyService], 
    template: ` 
    <div> 
     <h2>List</h2> 
     <child [list]="parent_list"></child> 
    </div> 
    `, 
    directives: [ChildComponent] 
}) 
export class App implements OnInit { 
    parent_list: string[] = []; 

    constructor(private _myService: MyService) {} 

    ngOnInit() { 
    this.parent_list = this._myService.getList(); 
    } 
} 

Ребенок:

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

@Component({ 
    selector: 'child', 
    providers: [], 
    template: ` 
    <div *ngFor="let item of list"> 
     <input type="checkbox" /> 
     {{ item }} 
    </div> 
    `, 
    directives: [CORE_DIRECTIVES] 
}) 
export class ChildComponent { 
    @Input() list: string[]; 
} 

Услуги:

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

@Injectable() 
export class MyService { 
    getList() { 
    // some function that returns your list 
    return ['string 1', 'string 2', 'string 3']; 
    } 
} 

Here is a working example that is a bit more flushed out.
Here is an egghead.io video on @Inputs

Надеюсь, это поможет.