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

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>

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

这个Typescript create array with loop dynamically是我已经得到的最接近的结果，但要么它不适用于我的情况，要么我不明白。

编辑:我想做的事情的伪代码:

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

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

希望这有帮助。