我有问题,因为我从不在 * nfor中绘制变量" datos",我认为问题在于渲染,因此,它实现"可观察到",但是它仍然不起作用
感谢您的帮助!
" header-menu.component.ts"
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';
@Component({
moduleId: module.id,
selector: 'as-headermenu',
templateUrl: 'header-menu.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderMenuComponent implements OnInit {
datos = []; // Aqui se carga el json
private ruta = 'assets/json_header_menu.json';
constructor(private http: Http) {}
ngOnInit() {
this.loadJson().subscribe(
vdatos => this.datos = vdatos,
err => console.log(err),
() => console.log(this.datos));
console.log(this.datos);
}
loadJson(): Observable<any[]> {
return this.http.get(this.ruta)
.map(res => res.json());
}
}
" header-menu.html"
<ul *ngIf="datos"> <li *ngFor="let dato of datos | async; let i =
index"> {{ dato.url }} {{ dato.icono }} {{ dato.titulo }} {{ i }}
</li>
" header-menu-module.ts"
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { HeaderMenuComponent } from './index';
@NgModule({
declarations: [
HeaderMenuComponent
],
imports: [
RouterModule,
BrowserModule,
HttpModule
],
exports: [
HeaderMenuComponent
]
})
export class HeaderMenuModule {
}
图像控制台错误:控制台错误
您不需要在这里的异步管,它应该没有它,
<ul *ngIf="datos"> <li *ngFor="let dato of datos; let i =
index"> {{ dato.url }} {{ dato.icono }} {{ dato.titulo }} {{ i }}
</li>
| async
管道确实有助于从Observable
流中解开数据。因此,要使您的代码工作,您应该分配可观察到的datos
变量。
ngOnInit() {
this.datos = this.loadJson();
}
我修复了它以删除代码"更改"
的行 @Component({
moduleId: module.id,
selector: 'as-headermenu',
templateUrl: 'header-menu.html',
/*changeDetection: ChangeDetectionStrategy.OnPush*/
})
谢谢