angular - 无效管道参数 : '' for pipe 'AsyncPipe' at invalidPipeArgumentError

Question

我正在尝试使用管道和 map 从 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>

我不知道为什么我得到一个空值 ' '，这是我的控制台的错误:

ListUploadComponent.html:3 ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:3981) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (common.js:4590) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (common.js:4580) at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (common.js:4562) at Object.eval [as updateDirectives] (ListUploadComponent.html:10) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054) at checkAndUpdateView (core.js:10451) at callViewAction (core.js:10692) at execComponentViewsAction (core.js:10634) at checkAndUpdateView (core.js:10457)

先感谢您。

Answer 1

异步管道接受一个 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 pipeable operator。

更新 - 调试步骤后

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