使用angular中的字符串路径提取嵌套对象属性

时间:2018-03-09 17:34:37

标签: json angular angular-template

有什么方法可以从控制器传递嵌套路径然后在模板中使用? 我希望模板中的类型绑定能够传递 change.Property.PropertyName

路径中的内容

控制器

asimddp

模板

sve

修改 现在,正如它所示,[type]绑定正在解析为

private _columns = [
    { field: 'Name', title: 'Type', displayType: 'Property.PropertyName' },
    { field: 'ChangeDate', title: 'Date', displayType: 'Date' }
]

2 个答案:

答案 0 :(得分:1)

您可以使用递归函数,如:

@Component({...})
export class Foo {
   transform(value: any, name: string): any {
    if (Array.isArray(value) || !(value instanceof Object) || !name) {
      return value;
    } else if (name.indexOf('.') > -1) {
      const splitName: string[] = name.split(/\.(.+)/, 2);
      return this.transform(value[splitName[0]], splitName[1]);
    } else {
      return value[name];
    }
  }
}

并在模板中使用它,如下所示:

<td *ngFor="let col of _columns">
    <z-grid-cell-display [type]="transform(change, col.displayTipe)" [field]="change" [context]="change[col.field]"></z-grid-cell-display>
</td>

另一种方法是将其移入管道

@Pipe({
  name: 'propertyValue'
})
export class PropertyValuePipe implements PipeTransform {
  transform(value: any, name: string): any {
    if (Array.isArray(value) || !(value instanceof Object) || !name) {
      return value;
    } else if (name.indexOf('.') > -1) {
      const splitName: string[] = name.split(/\.(.+)/, 2);
      return this.transform(value[splitName[0]], splitName[1]);
    } else {
      return value[name];
    }
  }
}

然后

 <td *ngFor="let col of _columns">
        <z-grid-cell-display 
         [type]="change | propertyValue: col.displayTipe" 
         [field]="change" 
         [context]="change | propertyValue: col.field">
        </z-grid-cell-display>
    </td>

答案 1 :(得分:0)

您可以为此编写一个简单的方法。

resolve(stringPath, baseObject): any {
return stringPath.split('.').reduce((p, q) => {
return p ? p[q] : null;
} , baseObject|| self);
  }

然后您可以调用此方法

resolve('customer.address.line1', customerObject);

我希望这将有助于解决类似问题并为该问题构建答案。