Question

我是棱角分明的新手2.已经完成了教程并尝试了一些事情，但坚持下面的一个问题。有人会知道吗？

以下是我的代码

app.component.ts

import {Component} from 'angular2/core';
import {Items} from './test_items';

@Component({
  selector: 'my-app',
  template:`        
        <div class="content-wrapper">
            <div class="content">
                <ul>
                    <li *ngFor="#hero of heroes">
                        <span>{{hero.id}}</span> {{hero.name}}
                    </li>
                </ul>
            </div>
        </div>
    `
})

export class AppComponent {
  public title = 'Test';
}

test_items.ts

export class Hero {
  id: number;
  name: string;
}

var HEROES: Hero[] = [
  { "id": 11, "name": "Mr. Nice" },
  { "id": 12, "name": "Narco" },
  { "id": 13, "name": "Bombasto" },
  { "id": 14, "name": "Celeritas" },
  { "id": 15, "name": "Magneta" },
  { "id": 16, "name": "RubberMan" },
  { "id": 17, "name": "Dynama" },
  { "id": 18, "name": "Dr IQ" },
  { "id": 19, "name": "Magma" },
  { "id": 20, "name": "Tornado" }
];

export class Items {
  public heroes = HEROES;
}

英雄列表未按预期显示出来。从另一个组件获取列表是否有限制？

Answer 1

组件的视图遍历组件的ar heroes。但根本没有这样的阵列。该组件唯一拥有的是标题。

完全不相关的类Items碰巧有一个名为heroes的字段这一事实无关紧要。因此，您在组件中导入了Items。

导入并不意味着Items的所有字段都成为AppComponent的字段。它只是意味着编译器和运行时知道在编译/执行代码时在哪里查找Items类。但由于AppComponent不使用类Items，导入无用。

Answer 2

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Items,Hero} from './comp';

@Component({
  selector: 'app',
  template:`        
        <div class="content-wrapper">
            <div class="content">
                <ul>
                    <li *ngFor="#hero of heroes">
                        <span>{{hero.id}}</span> {{hero.name}}
                    </li>
                </ul>
            </div>
        </div>
    `
})

export class AppComponent {
  public title = 'Test';
  heroes:Hero[];

  constructor(items:Items)
  {
    this.heroes = items.heroes;
  }
}

bootstrap(AppComponent, [Items]);

这可能会对你有帮助。

有关使用导入组件的问题

2 个答案: