在Angular 2中使用Apollo客户端通过异步管道获取嵌套数据

我正在尝试从此查询中获取数据：

const onInitQuery = gql`
query {
   library {
       files {
          name
          libraryPath
          id
          thumbFullPath
       }
      folders {
         id
         name
      }
   }
}

我正在遵循提供的示例，但我不知道如何形成

*ngFor

循环。在本例中，他通过选择管道选择嵌套查询的第一层，但我需要文件夹属性，该属性嵌套在第二层中

我的

*ngFor

将如何实现这一点？Atm看起来像这样，但这不起作用：

  <div class="test" *ngFor="let folder of data | async | select: 'library.folders'">{{folder.name}}</div>

{{folder.name}

我的组件如下所示：

@Component({
  selector: 'cv-library',
  templateUrl: './library.component.html',
  styleUrls: ['./library.component.css']
})
export class LibraryComponent implements OnInit, AfterViewInit {

  public data: ApolloQueryObservable<any>;
  public folders: any;
  public files: any;

  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    });
  }
}

  <div>
    <p>followers: </p>
    <ul *ngFor="let follower of data | async | select: 'user.followers.nodes'">
      <li>{{follower.name || follower.login}}</li>
    </ul>
  </div>

@组件({
选择器：“cv库”，
templateUrl:'./library.component.html'，
样式URL:['./library.component.css']
})
导出类LibraryComponent实现OnInit，AfterViewInit{
公共数据：可观测；
公共文件夹：任何；
公共档案：任何；
构造函数（私有阿波罗：阿波罗）{}
恩戈尼尼特（）{
this.data=this.apollo.watchQuery({
查询：onInitQuery
});
}
}

apollo angular

SelectPipe

尚不支持获取嵌套值。但是你可以自己实现这个管道。以下是我的解决方案：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'select'
})
export class SelectPipe implements PipeTransform {
  transform(obj: any, name: string = '') {
    if (name && obj && obj.data) {
      return name.split('.').reduce((prev, curr) => {
        return prev ? prev[curr] : undefined;
      }, obj.data);
    }
  }
}

您可以这样使用它：

@Component({
  selector: 'cv-library',
  templateUrl: './library.component.html',
  styleUrls: ['./library.component.css']
})
export class LibraryComponent implements OnInit, AfterViewInit {

  public data: ApolloQueryObservable<any>;
  public folders: any;
  public files: any;

  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    });
  }
}

  <div>
    <p>followers: </p>
    <ul *ngFor="let follower of data | async | select: 'user.followers.nodes'">
      <li>{{follower.name || follower.login}}</li>
    </ul>
  </div>

追随者：


{{follower.name | | follower.login}

---

获取

数据.user.followers.nodes

值。

apollo angular

SelectPipe

尚不支持获取嵌套值。但是你可以自己实现这个管道。以下是我的解决方案：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'select'
})
export class SelectPipe implements PipeTransform {
  transform(obj: any, name: string = '') {
    if (name && obj && obj.data) {
      return name.split('.').reduce((prev, curr) => {
        return prev ? prev[curr] : undefined;
      }, obj.data);
    }
  }
}

您可以这样使用它：

@Component({
  selector: 'cv-library',
  templateUrl: './library.component.html',
  styleUrls: ['./library.component.css']
})
export class LibraryComponent implements OnInit, AfterViewInit {

  public data: ApolloQueryObservable<any>;
  public folders: any;
  public files: any;

  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    });
  }
}

  <div>
    <p>followers: </p>
    <ul *ngFor="let follower of data | async | select: 'user.followers.nodes'">
      <li>{{follower.name || follower.login}}</li>
    </ul>
  </div>

追随者：


{{follower.name | | follower.login}

---

要获取

数据.用户.追随者.节点

值。

我想说的是，最好的做法是在模板之外进行每一次转换，不要发明轮子，并公开一个可观察的对象，它会准确返回模板所需的内容

<div>
  <p>followers: </p>
  <ul *ngFor="let follower of followers | async">
    <li>{{follower.name || follower.login}}</li>
  </ul>
</div>

---

我想说的是，最好的做法是在模板之外进行每一次转换，不发明轮子，而是公开一个可观察的对象，该对象返回模板所需的内容

<div>
  <p>followers: </p>
  <ul *ngFor="let follower of followers | async">
    <li>{{follower.name || follower.login}}</li>
  </ul>
</div>

---

现在不可能通过指定路径来获取嵌套值，但可以为其创建PR。代码是它还不支持的。您可以检查源代码

找不到名称“ApolloQueryObservable”。

现在无法通过指定路径来获取嵌套值，但您可以为其创建PR。代码是它还不支持的。您可以检查源代码

找不到名称“ApolloQueryObservable”。