我在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);
}
答案 0 :(得分:2)
正在发生的事情是你的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