Asynchronous 角度2异步管道，可观察

我尝试通过异步管道使用一个可观察的对象，以下是我的模板：

<input #address type="text" id="address" placeholder="{{placeHolder}}" (keyup)="addTerm(address.value)" /> 
            <div *ngFor="let place of possiblesPlaces | async">
            {{place.label}}
</div>

{{place.label}

以下是组成部分：

    export class LocationFieldComponent implements OnInit{
    private searchTerms = new Subject<string>();

    @Input()
    placeHolder:string;


    possiblesPlaces:Observable<Array<{label:string,value:any}>>;

    addTerm(address:string) {
        this.searchTerms.next(address);
    }

    ngOnInit(): void {

        this.possiblesPlaces=this.searchTerms.filter(t=>t.length>2).debounceTime(300).distinctUntilChanged()
            .flatMap(term =>

                Observable.of(this.fetchResults(term))
             )
            .catch(error => {
            // TODO: real error handling
            console.log(error);
            return Observable.of([]);
        });
        this.possiblesPlaces.subscribe(val => console.log(val))
    }


    fetchResults(address:string) :Array<{label:string,value:any}> {
        var result=new Array;
        var geocoder  = new google.maps.Geocoder();
        console.log("search with"+address);
        geocoder.geocode( { 'address': address}, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
                for(let i=0;i<results.length;i++){
                    result.push( {label:results[i].formatted_address,value:null});
               }
            } else {
                console.log("Geocode was not successful for the following reason: " + status);
            }
        });
        return result;
    }
}

导出类LocationFieldComponent实现OnInit{
private searchTerms=新主题（）；
@输入（）
占位符：字符串；
可能位置：可观察；
addTerm（地址：字符串）{
this.searchTerms.next（地址）；
}
ngOnInit（）：void{
this.possiblesPlaces=this.searchTerms.filter（t=>t.length>2）.debounceTime（300）.distinctUntilChanged（）
.flatMap（术语=>
可观察的（这个结果（术语））
)
.catch（错误=>{
//TODO:真正的错误处理
console.log（错误）；
（[]）的可观测收益率；
});
this.possiblesPlaces.subscribe（val=>console.log（val））
}
fetchResults（地址：字符串）：数组{
var结果=新数组；
var geocoder=new google.maps.geocoder（）；
console.log（“使用“+地址进行搜索”）；
geocoder.geocode（{'address'：address}，（结果，状态）=>{
if（status==google.maps.GeocoderStatus.OK）{
对于（让i=0；i好的，我算出了

你不能使用像geocoder.geocode这样使用回调函数的http请求，你必须使用http.get和url来处理这个问题

fetchResults（地址：string）：数组{
var sub=新主题（）；
var geocoder=new google.maps.geocoder（）；
console.log（“使用“+地址进行搜索”）；
geocoder.geocode（{'address'：address}，（结果，状态）=>{
if（status==google.maps.GeocoderStatus.OK）{
for（设i=0；it.length>2）.debounceTime（300.distinctUntilChanged）（）
.flatMap（术语=>
这个.fetchResults（term）.scan（[]，acc，x）=>acc.concat（x））；
)
.catch（错误=>{
//TODO:真正的错误处理
console.log（错误）；
（[]）的可观测收益率；
});
this.possiblesPlaces.map（val=>console.log（val））
}

fetchResults（）
返回一个可观察的数组。在您的问题中，您返回一个空数组，然后仅在Geocoder的响应到达时填充它。这看起来不太可靠

ngOnInit（）
使用
this.possiblePlaces.subscribe（）
但是
订阅
返回一个
订阅
而不是一个
可观察的
，
|异步
只与
承诺
和
可观察的
一起工作，但不与
订阅
一起工作。如果您使用
映射
而不是
订阅
，则返回一个
可观察的
。
谢谢。谢谢帮了我很多忙