angular2 数据绑定不起作用？

Question

所以我正在尝试将 record 变量传递给其他组件。

我已经使用 http provider 读取了 json 数据，并使用以下代码成功地将其存储在变量名 record 中。在组件模板中访问此对象时遇到问题。即

1.left-sidebar.component.ts

import {Component, OnInit,Input} from 'angular2/core';
import {ComponentBarComponent} from "./../component-bar/component-bar.component";
import { DataService } from '../../../app/services/data.service';
import {Http, Response} from 'angular2/http';

@Component({
    selector: 'left-sidebar',
    directives:[ComponentBarComponent],
    providers: [DataService],
    template: `
    <div style="overflow-y:auto;height:62vh;">         
        {{record | json}}  //this prints record object in json format correctly
        {{record.name}}  //but this line produces exception       
        <component-bar [record]="record"></component-bar> 
        //also this object is not getting passed to component-bar object.       
    </div>`
})

export class LeftSidebarComponent implements OnInit {        
    public absolutePath:string;
    record:Object;
    constructor(private dataService: DataService) { 
        this.componentName="Heading";
        this.absolutePath="http://localhost:8080/src/app/lib/component-group.json";        
        this.dataService.getData(this.absolutePath)
        .subscribe((data:any[]) => {
            this.record = data;                
            console.log(this.record.name);//this prints component name correctly
        });          
    }
    ngOnInit() {        
     }
}

2.component-group.json

{
    "name": "components",
    "desc": "components",
    "libName":"Standard",
    "components": [
        {
            "name":"HeadingComponent",
            "desc":"",
            "cmpType":"Standard",
            "imgUrl":"http://localhost:3202/uploads/ABC.png",
            "cmpLocation":"",
            "isDynamic":"true"          
        },
        {
            "name":"BodyComponent",
            "desc":"",
            "cmpType":"Standard",
            "imgUrl":"http://localhost:3202/uploads/pqr.png",
            "cmpLocation":"",
            "isDynamic":"true" 
        },
        {
            "name":"FooterComponent",
            "desc":"",
            "cmpType":"Standard",
            "imgUrl":"http://localhost:3202/uploads/erter.png",
            "cmpLocation":"",
            "isDynamic":"true" 
        }    
    ],
    "createdBy":"ABC",
    "updatedBy":"ABC"
}

当我使用 {{record | json}} 时，它会正确地打印 json 数据，但是当我尝试像 {{record.name}} 一样打印它时，它会产生以下异常

EXCEPTION: TypeError: Cannot read property 'name' of undefined in [ 
    {{record | json}}        
    {{record.name }}           
     in LeftSidebarComponent@22:43]

有什么建议吗？提前致谢

Answer 1

http 调用是异步的。您收到未定义引用错误的原因可能是因为在 http 调用有机会 return 之前呈现模板。

尝试这样做：

{{record?.name }}

这确保如果记录未定义，它不会产生错误。当 http 调用最终 returns 并为 record 赋值时，将重新计算表达式以显示预期结果。

angular2 数据绑定不起作用？

angular2 data binding not working?

json

xmlhttprequest

object

angular