Question

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

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

我正在关注here提供的示例，但我不知道如何构建我的*ngFor循环。在示例中，他通过选择管道选择嵌套查询的第一层，但我需要folders属性，它嵌套在第二层。

我的*ngFor将如何实现这一目标？它看起来像这样，但这不起作用：

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

我的组件看起来像这样：

@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
    });
  }
}

Answer 1

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);
    }
  }
}

您可以像这样使用它：

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

获得data.user.followers.nodes的值。

Answer 2

我想说，最佳实践是通过不发明轮子而不暴露可返回模板所需内容的Observable来进行模板之外的所有转换。

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

在组件类中：

ngOnInit() {
    this.data = this.apollo.watchQuery({
      query: onInitQuery
    })
    .valueChanges
    .pipe(
      map(result => ...)
    );
  }

通过Angular 2中的Apollo客户端通过Async管道获取嵌套数据

2 个答案: