Question

我正在尝试遍历模板中的组件列表。组件本身具有模板。如何获取要添加到“父”模板中的组件的模板？

我尝试了angular-dart教程中的很多答案以及其他有关angular-js和angular的问题，但没有一个起作用。

我的第一个想法是执行以下操作：

ElementList组件

@Component(
  selector: 'element-list',
  template: '''
  <ul>
    <li *ngFor="let element of list">
      {{ element }}
    </li>
  </ul>
  ''',
  directives: [coreDirectives],
)
class ElementList{
  List<Element> list;

   ElementList(){
      list = [Element(), Element()];
   }
}

元素组件

@Component(
  selector: 'element',
  template: '''
  <li>
    {{ text }}
  </li>
  ''',
)
class Element{
  String text = 'test';
}

但这只会显示：

“元素”的实例
“元素”的实例

我必须做些什么才能使其显示：

测试
测试

我要在其中应用此文件的确切文件是

List Component

Element Component

Answer 1

我不知道这是否是解决此问题的最干净的方法，但是您是否尝试过访问控制器的list属性？像这样：

@Component(
  selector: 'element-list',
  template: '''
  <ul>
    <li *ngFor="let element of list; let i = index"">
      {{ list[i] }}
    </li>
  </ul>
  ''',
  directives: [coreDirectives],
)
class ElementList{
  List<Element> list;

   ElementList(){
      list = [Element(), Element()];
   }
}

Answer 2

这是使用Angular的非常奇怪的方法。我得到的印象是您正在尝试使Angular像其他框架一样工作。

我将重构代码，以便模板生成多个<elements>并将其数据接受为[inputs]，而不是在Dart代码中实例化“''Elements””并尝试将它们塞入模板。

我无法证明不可能做您想做的事情，但是我敢肯定这不是Angular的方法。

Answer 3

我找到了解决方法：

我更改了代码，为列表中的每个项目创建了一个新的<element>，然后通过@Input（）指令将项目的文本放入元素组件中。

此外，我还必须将Element类添加到ElementList模板的指令中。

element_list.dart

import 'package:angular/angular.dart';

import 'package:angular_app/components/element.dart';
import 'package:angular_app/components/element.template.dart';

@Component(
  selector: 'element-list',
  template: '''
  <ul>
      <element *ngFor="let element of list" [text]="element.text"></element>
  </ul>
  ''',
  directives: [coreDirectives, Element],
)
class ElementList {
  List<Element> list;

  ElementList() {
    list = [Element(), Element()];
  }
}

element.dart

import 'package:angular/angular.dart';

@Component(
  selector: 'element',
  template: '''
  <li>
    {{ text }}
  </li>
  ''',
)
class Element {
  @Input()
  String text = 'test';
}

如何使用ngFor

3 个答案: