在我的Angular 2应用程序中，出现错误：
无法读取未定义的属性“ title”。
这是一个非常简单的组成部分，只是试图使最低限度在这里工作。它命中了我的API控制器（奇怪的是多次），并且在返回对象后似乎命中了回调。我的console.log输出我期望的对象。这是完整的错误：
TypeError: Cannot read property 'title' of undefined
at AbstractChangeDetector.ChangeDetector_About_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:10897:14), <anonymous>:31:26)
at AbstractChangeDetector.detectChangesInRecords (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8824:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8807:12)
at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12)
at AbstractChangeDetector._detectChangesContentChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8871:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8808:12)
at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14)
at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12)
at AbstractChangeDetector.detectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8796:12)
服务（about.service.ts）：
import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import {AboutModel} from './about.model';
import 'rxjs/add/operator/map';
@Injectable()
export class AboutService {
constructor(private _http: Http) { }
get() {
return this._http.get('/api/about').map(res => {
console.log(res.json()); // I get the error on the line above but this code is still hit.
return <AboutModel>res.json();
});
}
}
组件（about.component.ts）：
import {Component, View, OnInit} from 'angular2/core';
import {AboutModel} from './about.model';
import {AboutService} from './about.service';
import {HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'about',
providers: [HTTP_PROVIDERS, AboutService],
templateUrl: 'app/about/about.html'
})
export class About implements IAboutViewModel, OnInit {
public about: AboutModel;
constructor(private _aboutService: AboutService) {}
ngOnInit() {
this._aboutService.get().subscribe((data: AboutModel) => {
this.about = data;
});
}
}
export interface IAboutViewModel {
about: AboutModel;
}
index.html
<script src="~/lib/systemjs/dist/system.src.js"></script>
<script src="~/lib/angular2/bundles/router.js"></script>
<script src="~/lib/angular2/bundles/http.js"></script>
<script src="~/lib/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/lib/angular2/bundles/angular2.dev.js"></script>
<script src="~/lib/es6-shim/es6-shim.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
},
map: {
rxjs: "lib/rxjs"
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
请下次提供您的视图和模型（app / about / about.html和about.model）。
如果要返回数组，则可以使用asyncPipe，它“订阅Observable或Promise并返回其发出的最新值。发出新值时，异步管道将组件标记为要检查更改”该视图将使用新值进行更新。
如果要返回原始类型（字符串，数字，布尔值），则也可以使用asyncPipe。
如果您要返回一个对象， 我不知道有什么方法可以使用asyncPipe ，我们可以将async管道与安全导航操作符 结合使用?.，如下所示：
{{(objectData$ | async)?.name}}
但这看起来有点复杂，我们必须为要显示的每个对象属性重复该操作。
正如评论中提到的@pixelbits一样，您可以subscribe()在控制器中观察到并将包含的对象存储到component属性中。然后在模板中使用安全导航操作符或NgIf：
服务
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map'; // we need to import this now
@Injectable()
export class MyService {
constructor(private _http:Http) {}
getArrayData() {
return this._http.get('./data/array.json')
.map(data => data.json());
}
getPrimitiveData() {
return this._http.get('./data/primitive.txt')
.map(data => data.text()); // note .text() here
}
getObjectData() {
return this._http.get('./data/object.json')
.map(data => data.json());
}
}
应用程序
@Component({
selector: 'my-app',
template: `
<div>array data using '| async':
<div *ngFor="let item of arrayData$ | async">{{item}}</div>
</div>
<div>primitive data using '| async': {{primitiveData$ | async}}</div>
<div>object data using .?: {{objectData?.name}}</div>
<div *ngIf="objectData">object data using NgIf: {{objectData.name}}</div>`
providers: [HTTP_PROVIDERS, MyService]
})
export class AppComponent {
constructor(private _myService:MyService) {}
ngOnInit() {
this.arrayData$ = this._myService.getArrayData();
this.primitiveData$ = this._myService.getPrimitiveData();
this._myService.getObjectData()
.subscribe(data => this.objectData = data);
}
}
数据/ array.json
[ 1,2,3 ]
数据/原始.json
Greetings SO friends!
数据/ object.json
{ "name": "Mark" }
输出：
array data using '| async':
1
2
3
primitive data using '| async': Greetings SO friends!
object data using .?: Mark
object data using NgIf: Mark
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句