如何在Angular2中绑定列表?

我正在尝试创建一个嵌套的treeview。

@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“>”):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功能?

阿ᴄʜᴇʀᴏɴғᴀɪʟ

向组件添加自定义属性

我认为这将更好地解决您的问题:要能够绑定到较新版本的Angular2中的自定义属性,您必须使用[attr.custom]语法。这个问题,这其中以获取更多信息。

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

如果要将自定义输入添加到指令中
如果要将数据输入到指令中,可以使用Angular2的来完成Input例如

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

这将确保在Component Angular中将知道从何处获取数据。

感谢@GünterZöchbauer的澄清:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular2中绑定原始HTML

Angular2:如何在angular2数据绑定中以html格式显示数据?

如何在Angular2中退订Firebase列表?

如何在Angular2中的部分模板中禁用模板绑定?

如何在Angularfire2 Angular2中对FirebaseListObservable列表进行排序?

如何使Angular2绑定innerHTML中的组件

如何使用Dart在angular2中绑定ngFormModel?

如何绑定到angular2中的data- *属性?

如何在angular2的表单元素中获取下拉列表选择的值

如何在angular2中的列表上应用搜索过滤器?

如何在Angular2中创建管道以过滤列表

如何在Angular FormArray中动态绑定ngSelect下拉列表

如何在angular2的html页面中绑定数据对象但在重新加载后面临问题

如何在不进行双向数据绑定的情况下从Angular2的“选择”中获取所选对象

如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

Angular2中FormControlName的动态绑定

在Angular2中绑定ngIf

Angular2中的输入属性绑定

angular2绑定中的数学函数

如何在R中绑定列表的列表

如何在绑定列表中显示列表

如何在Angular 2中的ngFor中设置绑定?

如何从angular2的下拉列表中限制重复值

如何在Angular2中包含npm中的CSS

如何在 Angular 2 中的数据绑定后执行操作?

在 Angular 2 中,如何在选择输入上绑定 null?

如何在Angular -2/4中删除双向数据绑定

如何在 Angular 2+ 中动态绑定 Kendo Grid

如何在Angular2中访问HTML视频元素