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>

在其他语言中，这是非常基本的，但我不确定它是否在角度2中完成，在html中借助于另一个ngFor或如何完成。老实说，我缺乏搜索如何完成这项工作的词汇，所以如果它过于基本，我很抱歉。

这个Typescript create array with loop dynamically离我越近越近，但要么我的情况不起作用，要么我没有得到它。

编辑：我想做的伪代码：

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

成为物品＆＃34;对象＆＃34;或者我想在第二个组件中动态使用的数据或数组。

第二个组件基本上是一个经典用户，几乎与此相同

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

希望这有帮助。

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

1 个答案: