Question

我正在尝试创建一个嵌套的树视图。

@Component({
    selector: "myItem",
    template: `
        <li *ngIf="!Array.isArray(data)"> {{data.text}} </li>
        <ul *ngIf="Array.isArray(data)">
            <myItem *ngFor="let x of data" [(data)] = "x.data"> </myItem>
        </ul>
    `
})
export class MyItemComponent {
    static root = true;
    data: any;

    constructor() {
        if (MyItemComponent.root) {
            this.data = [
                { text: "foo" },
                [{ text: "bar" }, { text: "foo" }]
            ];
            MyItemComponent.root = false;
        }
    }
}

错误是

无法绑定到“数据”，因为它不是已知的本机属性（“ta.text}} ] [data] =“x.data”＆gt; “）：MyItemComponent

编辑：如何实现删除按钮？模板应如下所示：

        <li *ngIf="!Array.isArray(data)"> {{data.text}} <button (click)="clicked()"> delete me</button> </li>
        <ul *ngIf="Array.isArray(data)"> <button (click)="clicked()"> delete me</button>
            <myItem *ngFor="let x of data" [(data)] = "x.data"> </myItem>
        </ul>

click功能是什么？

Answer 1

向组件添加自定义属性

我认为这将更好地解决您的问题：为了能够在较新版本的Angular2中绑定自定义属性，您必须使用[attr.custom]语法。有关详细信息，请参阅this问题和this one。

查看@ yurzui的评论 - 它将您链接到工作的Plunker

如果您想为指令添加自定义输入
如果您想将数据输入到指令中，可以使用Angular2的Input来完成。 E.g。

 export class MyItemComponent {
  //...
  @Input('attribute') attribute: any;
  //...
 }

这将确保您的Component Angular将知道在哪里获取数据。

感谢@GünterZöchbauer澄清：）

Answer 2

您不能在绑定表达式或任何其他全局引用中使用Array...，如（window，Object，枚举或其他类型名称，...）。 Angular只能引用其组件类或模板变量的属性或方法。

您可以在组件中创建一个函数并改为调用此函数

 <li *ngIf="!isArray(data)"> {{data.text}} </li>

 export class MyComponent {
   isArray(arr) { return Array.isArray(arr); }

   ...
 }

如上所述，<myItem>需要@Input() data才能使值绑定（[...]）正常工作，并@Output() dataChange = new EventEmitter()使事件绑定（(...)）正常工作并且输出名称必须与输入名称相同，只有Change后缀才能使速记[(...)]“双向绑定”起作用。

x已经是data数组中的项目，此项目没有data属性（第1项具有text属性，第2项属于data属性包含两个对象的数组，因此也没有Mail.new属性。

如何绑定Angular2中的列表？

2 个答案: