如何在Angular2中绑定列表？

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}} ][数据] = "x.data"> "): 我的项目组件

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

        <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 来完成。例如

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

这将确保在您的组件中 Angular 将知道从哪里获取数据。

感谢@Günter Zö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 属性（第一项具有 text 属性，第二项是包含两个对象的数组，因此也没有data 属性）。