InvalidPipeArgument： for pipe 'AsyncPipe' at invalidPipeArgumentError

Question

我正在尝试使用管道和映射从可观察对象中提取字符串值，最终我总是得到一个空字符串。我希望有人可以帮助我了解这个问题背后的原因。

我有一个从后端获取文件的 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 ERROR Error： InvalidPipeArgument： '' for 管道"异步管道" at invalidPipeArgumentError (common.js：3981( at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy (常见.js：4590( at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe (通用.js：4580( at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform (常见.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

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

以下

<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("?"))
}))

如果需要控制台.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)
)