InvalidPipeArgument：''表示管道'AsyncPipe'在invalidPipeArgumentError

debugcn 发表于 Dev

缺口

我试图使用管道和映射从Observable提取字符串值，但最终我总是得到一个空字符串。我希望有人可以帮助我了解此问题的原因。

我有一个http服务，可从后端获取文件：

getFiles(url: string, idProject: number, docProject: string): Observable<any> { 
return this.http.get(`${this.hostUrl}${url}/${idProject}/${docProject}`); 
  }

我这样称呼getFiles（...）：

  showFile = false;
  fileUploads: Observable<string[]>;
.
.
.
showFiles(enable: boolean) {
    this.showFile = enable;

    if (enable) {
this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
  'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
            .pipe( 
                  map( response => {
                  return response.slice(
                         response.indexOf("files"), 
                         response.lastIndexOf("?"))
                         })).subscribe(
                           (data) => {
                            this.fileUploads=data
                            console.log(data)},
                           (error) => console.log(error));
}
}

Map之前的结果是：

http://localhost:8080/api/v1/pv/files/file1.jpg?projetId=563, http://localhost:8080/api/v1/pv/files/file2.jpg?projetId=563

MAp之后是：一个空数组。

HTML：

<button class="button btn-info" *ngIf='showFile' (click)='showFiles(false)'>Hide Files</button>

<button class="button btn-info" *ngIf='!showFile' (click)='showFiles(true)'>Show Files</button> 


<div [hidden]="!showFile">
  <div class="panel panel-primary">
    <div class="panel-heading">Liste des fichiers</div>

    <div *ngFor="let file of fileUploads | async">  
      <div class="panel-body">
        <app-details-upload [fileUpload]='file'></app-details-upload>
      </div>
    </div>
  </div>
</div>

我不知道为什么我得到一个空值''，这是我的consol错误：

ListUploadComponent.html：3错误错误：InvalidPipeArgument：''在AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy（在invalidPipeArgumentError（common.js：3981）处为管道'AsyncPipe' / node_modules / @ angular / common /在AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe（common.js：4580）在AsyncPipe.push ../ node_modules / @ angular / common / fesm5 / common.js.AsyncPipe.transform（common.js：4562）在Object.eval [作为updateDirectives]（ListUploadComponent.html：10）在Object.debugUpdateDirectives [作为updateDirectives]（core.js：11054）在checkAndUpdateView（核心.js：10451）位于callViewAction（core.js：10692），而execComponentViewsAction（core.js：10634）位于checkAndUpdateView（core.js：10457）

先感谢您。

安德鲁·艾伦

异步管道采用Observable，并在模板中为您订阅，并在组件破坏时为您退订。遵守在可观察流变量末尾使用$的约定。

以下

<div *ngFor="let v of values$ | async">
  {{v}}
</div>

相当于

<div *ngFor="let v of values">
  {{v}}
</div>

在ts文件中的何处执行此操作

this.values$.subscribe(values => this.values = values)

在您的示例中，您可以从模板中删除异步管道，也可以删除订阅并分配流。

this.fileUploads$ = this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
  'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
            .pipe( map( response => {
                  return response.slice(
                         response.indexOf("files"), 
                         response.lastIndexOf("?"))
                         }))

如果需要console.log进行调试，请使用tap RxJS可管道运算符。

更新-调试步骤后

tap运算符不会影响流（它可用于导航或日志记录之类的副作用），因此它可以告诉您确切的管道流中的下一个运算符正在获取...字符串数组。因此，键入以下内容...

this.fileUploads$ = this.yourService.pipe(
    // tap(console.log),
    map((responseUrls: string[]) => {
        return responseUrls.map((url: string) => {
           // some function that 
           // uses string methods
           // or regex
           // to return what you
           // want e.g.
           return url.slice(
               url.indexOf(‘files’),
               url.indexOf(‘?’)
           )
        })
    })
    // }),
    // tap(console.log)
)