如何从angular4-Ngrx-lodash中的嵌套Json对象获取数据

时间:2018-06-09 07:39:25

标签: json angular typescript lodash ngrx

我正在尝试显示下拉列表成员名称,我只能名称,但我想从嵌套对象中显示 editorName 。我尝试使用loadsh,forEach但无法显示。我是ngrx的新手。

HTML:

<div class="dopdown" *ngFor='let item of items$ |async'>
<a href="">{{item.name}}</a></div

API响应:

[{
"grpId": 1,
"name": "brain editor",
"member": {
    "gif1": {
        "gpId": "gp1",
        "firstName": "Danny",
        "lastName": "Johns",
        "editorName": "Danny-Johns",
        "suffix": "JR.",
        "Add": true
    },
    "gif2": {
        "gpId": "gp2",
        "firstName": "Mary",
        "lastName": "chang",
        "editorName": "Mary-chang",
        "suffix": "JR.",
        "Added": true
    }
},
"numbers": {
    "a01": {
        "numbersId": "a1",
        "numbersShow": "Dnn1093746",
        "numbersTo": ["gf1", "gf4"],
    }
}}]

angular.service.ts

  export class NewService {
     private _myUrl = 'http://myJsonApi';
   constructor(private _http: HttpClient) {}

      getData(): Observable<Idata[]>{
              return this._http.get<Idata[]>(this._myUrl)
              .pipe(
                      tap(data => {}),
                     catch(this.handleError)) }     
   private handleError(err : HttpErrorResponse){   
                 return Observable.throw(err.message);}}

Component.ts:

 export class NewClass implements OnInit {
   vm: any = {};
   items$: Observable<Idata[]>

   constructor(private store: store<fromRoot.AppState>) {}

      ngOnInit(): void {
              this.items$ = this.store.select(fromRoot.getNameDrpdwn)
              getData(); 
       }
       getData() {
              this.store.dispatch(new nameAction.LoadNameAction());    
       }}

Model.ts

export interface Idata {
              grpId: number;
              name: string;
            member: any;
          editorName: string;
     }

1 个答案:

答案 0 :(得分:0)

尝试此插值语句

{{ item.member.gif1.firstName }}

而不是

{{item.name}}

修改

<div class="dopdown" *ngFor='let item of items$ | async'>
    <a href="">{{item.member.gif1.editorName}}</a>
    <a href="">{{item.member.gif2.editorName}}</a> 
</div>