Question

我试图使用管道和映射从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));
}
}

地图之前的结果是：

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错误错误：InvalidPipeArgument：“” 管道'AsyncPipe' 在invalidPipeArgumentError（common.js：3981）在AsyncPipe.push ../ node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy （common.js：4590）在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（core.js：10451）在callViewAction（core.js：10692）在execComponentViewsAction（core.js：10634）在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可管道运算符。

更新-调试步骤后

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

InvalidPipeArgument：针对invalidPipeArgumentError

1 个答案:

更新-调试步骤后