每次调用时如何创建不同长度的数组

Question

我现在正在处理的案例是，我发出了一个 HTTP GET 请求，并获得了一组 ID 和数据（来自 json），到目前为止我已经能够成功在屏幕上打印（像这样 <li *ngFor="#date of dates">{{date.date2}}</li> ）。我希望该数组在另一个组件 component2:

中使用

我有另一个组件显示一个小框，其中显示了几个按钮。我从 materializecss 得到它，目前静态显示 5 个按钮。我可以手动更改它，但我想这样做，以便它可以适应我从以前的组件中获得的许多答案。所以如果我得到 3 个 ID，我希望它显示 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>

在其他语言中，这是非常基本的，但我不确定它是否在 angular 2 中完成，在 html 中借助另一个 ngFor 完成，或者如何完成。老实说，我缺乏词汇来搜索这是如何完成的，所以如果它太基础了，我很抱歉。

这个是我得到的更接近的结果，但要么它不适合我的情况，要么我不明白。

编辑：我想做的伪代码：

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

作为我想在第二个组件中动态使用的 "object" 或数据或数组的项目。

第二个组件基本上是一个经典订阅者，实际上与此相同

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);
  }
}

但数据不同。

由于我缺乏经验，目前该应用程序的结构...有点 big/messy，但它会像这样：

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

基本上您有三个元素（parent 组件、child 组件和服务）。 parent 元素从服务中检索列表（数组）并通过 @Input 将列表向下传递到 child 组件。

Parent:

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();
  }
}

Child:

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

希望对您有所帮助。

每次调用时如何创建不同长度的数组

How to create an array of different lenght each time it's called

javascript

materialize

angular