Question

我在AppComponent中使用：

附加一个Observable（menuitems $）

df.show
+----------+-------------------------+
|002_Gender|003_Where did you grow up|
+----------+-------------------------+
|    Female|                In a town|
|      Male|          Multiple places|
+----------+-------------------------+

columnNames.foldLeft(df)( (df,c) => df.withColumn(c.concat("_numeric") , calculateScore(lit(c) , df(c) ) ) ).show(false)

+----------+-------------------------+------------------+---------------------------------+
|002_Gender|003_Where did you grow up|002_Gender_numeric|003_Where did you grow up_numeric|
+----------+-------------------------+------------------+---------------------------------+
|Female    |In a town                |0                 |1                                |
|Male      |Multiple places          |1                 |2                                |
+----------+-------------------------+------------------+---------------------------------+

在我的AppComponent的.ts文件中，我创建了菜单项Observable：

<h2 *ngFor="let menuitem of menuitems$ | async">DEFAULT TEXT</h2>

在我的AppComponent的.ts文件中，我再次订阅：

this.menuitems$ = this.wordPressMenuService.getMenu(2).map(m => m.items);

.subscribe返回数据并将其记录到控制台中，但将其与Async-pipe绑定到H2-tag（也尝试了不同的标记）不会在屏幕上呈现h2-tag。没有（控制台）错误输出。

我的MenuService如下所示：

this.menuitems$.subscribe(menuitems => { console.log(menuitems); });

更新：当我删除subscribe（）时，它仍然有效，但仍然没有找到为什么你不能使用subscribe（）和模板绑定订阅相同的observable。所以使用下面的代码可行，但为什么它必须是一个单独的Observable？

protected readonly menus$ = new Subject<WordPressMenu>();

constructor(private dataService:DataService) { }

getMenu(id:number) : Observable<WordPressMenu> {
    this.dataService.get<WordPressMenu>(AppSettings.WP_MENU_ENDPOINT + id).subscribe(data => {
        this.menus$.next(data);
    });
    return this.menus$.filter(m => m.ID == id);
}

Answer 1

正在发生的事情是你的getMenu方法中的@Component({ selector: 'app-root', template: '<div>' + '<input type="file" (change)="upload($event)">' + '</div>', }) export class AppComponent { constructor(private _service: commonService) { } upload(event: any) { let files = event.target.files; let fData: FormData = new FormData; for (var i = 0; i < files.length; i++) { fData.append("file[]", files[i]); } var _data = { filename: 'Sample File', id: '0001' } fData.append("data", JSON.stringify(_data)); this._service.uploadFile(fData).subscribe( response => this.handleResponse(response), error => this.handleError(error) ) } handleResponse(response: any) { console.log(response); } handleError(error: string) { console.log(error); } }在异步管道订阅之前完成。因此，异步管道永远不会接收到主体的排放。如果可能的话，我会避免使用主题，只返回@Injectable() export class commonService { _url: string; constructor(private http: Http) { } uploadFile(data: any): Observable<{}> { this._url = 'http://localhost:4200/XXXXXXXXXX/uploadFile'; return this.http.post(this._url, data) .map(this.handleData) .catch(this.handleError); } private handleData(res: Response) { let data = res.json(); return data; } private handleError(error: Response | any) { return Observable.throw('API failed'); } }可观察的

dataService.get().subscribe

可观察的异步管道

1 个答案: