Question

当你遍历对象时，有没有办法可以动态地将角度处理程序放在角度处理程序中？

数组＆＃39;编辑＆＃39;列表中的项目。
它有4个顶级项目，ID为（1,2,3）
它有2个子项目，ID为1的孩子，ID为（4,5）。

我可以遍历项目并显示。

在id为1的第一个项目中，它有数字（4,5） - 这些是来自主编辑器数组的ID。因此，我不是渲染一个4和5的字符串，而是想从ID为4的编辑器和ID为5的Object渲染对象。

如果我{{editor [0] .id}} - 它有效，但[0]不是动态的。所以我试过了 {{editor [{{subitem}}]。id}} - 但这给了我一个错误。

这是HTML

<ul>
    <li *ngFor="let item of editor">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{editor[0].id}}
            </li>
        </ul>
    </li>
</ul>

Angular 2组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit {

      editor = {};
      constructor() {
        this.editor = editor;
         console.log('editor is', this.editor[1].item);
      }


      ngOnInit() {
      }

}

    const editor = [
        {
         id: 1, 
         item: 'pen',
         menuView: 'edit-view',
         mainView: 'edit-view',
         children:[4 , 5]
        },
        {id: 2, item: 'ruller', menuView: 'edit-view',mainView: 'edit-view'},
        {id: 3, item: 'pencil', menuView: 'pencil-view',mainView: 'pencil-view'},
        {id: 4, item: 'black', menuView: 'pen-black',mainView: 'pen--black'},
        {id: 5, item: 'white', menuView: 'pen-white',mainView: 'pen-white'},
 {id: 6, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'},
 {id: 7, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'}
    ];

如何在第一个循环中只显示ID为1,6,7的元素？我是否创建了自定义管道？如果我得到1000个数组的id是管道最好的东西？

Answer 1

由于您的对象实际上是对象数组，您可以使用自定义管道来过滤数组：

@Pipe({
  name: 'findById'
})
export class FindByIdPipe {
  transform(arr: any[], id: number) {
    return arr.find(x => x.id === id);
  }
}

然后在你的模板中

{{ (editor | findById: subitem).item }}

<强> Plunker Example

Answer 2

<li *ngFor="let item of editor">
        {{item.id}}
        <ul *ngIf="item.children">
            <li *ngFor="let subitem of item.children">
            {{getChild(subitem) | json}}

            </li>
        </ul>
    </li>

你应该有以下方法

getChild(id){
    console.log(_.find(this.editor, { 'id': id}));
    return _.find(this.editor, { 'id': id});
  }

注意：我正在使用lodash库，因为我喜欢它。的 LIVE DEMO

Answer 3

不确定我是否理解但是......你必须使用索引。在this page

中查找“局部变量”

<ul>
    <li *ngFor="let item of editor; let editorIndex = index">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{editor[editorIndex].id}}
            </li>
        </ul>
    </li>
</ul>

或者您可以使用item：

<ul>
    <li *ngFor="let item of editor">
        {{item.id}}
        <ul>
            <li *ngFor="let subitem of item.children">
                {{subitem}}
                {{item.id}}
            </li>
        </ul>
    </li>
</ul>

对象中的角度2数据绑定

3 个答案: