im试图在模板中创建一个if语句,以在数组长度为&lt时显示某个文本块;1.
这就是我尝试这样做的方式:
<div *ngIf="socialNetworks.length > 1">
<div class="alert-box warning radius">You can still connect some accounts</div>
<button class="btn btn-primary" *ngFor="let network of socialNetworks" (click)="loginSocialNetwork(network)">
{{network.title}}
</button>
</div>
,但我总是遇到一个错误,说它无法读取未定义的属性长度。
我在Angular 2组件中定义了可变的SocialNetworks []:
export class MyAccountComponent implements OnInit {
socialNetworks: socialNetwork[];
campaigns: Campaign[];
showGreeting: boolean = true;
constructor(
private _dataservice: DataService) {
}
然后,在单独的方法中,我在此处从金字塔视图中设置了响应的值:
getSocialNetworks() {
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => this.socialNetworks = res,
err => this.logError(err)
)
}
即使我在末尾添加了console.log语句以查看此的值。CocialNetworks,它说它不确定。但是在调试器中,我可以看到它的价值。Socialnetworks并不是未定义的。
所以我的问题是,我是否只是错误地引用了全局变量,还是我缺少/误解了一些东西?
在我看来,socialnetworks并不是在施工中设置为空数阵列,因此在init上将不确定。尝试将顶级社交网络更改为:
socialNetworks: socialNetwork[] = [];
我们在下面的评论中所说的问题最有可能在订阅方法中使用this
。它将其分配给不正确的范围。在下面尝试:
getSocialNetworks() {
var _that = this;
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => _that.socialNetworks = res,
err => _that.logError(err)
)
}
如果API调用使用某些外部库,则可能不会将其挂钩到Angular 2的摘要周期中(例如,Facebook SDK不是)。您可以使用Augury进行调试,也可以为简单起见,以设置构造函数中的全局窗口属性以访问您的组件:
constructor(private _dataservice: DataService) {
window['MAC'] = this;
}
然后,您可以在浏览器的开发工具中查看socialNetworks
数组是否实际设置:
MAC.socialNetworks
您可以随时在HTML中使用一些快速代码将其显示为JSON,以调试正在发生的事情:
{{socialNetworks | json}}
如果页面没有显示其具有值,但您在控制台中看到它,则您的_dataService
不会触发更改检测,因此必须手动进行。您可以通过在构造函数中注入ApplicationRef
并在设置数据后在其上调用tick()
。
constructor(
private _dataservice: DataService,
private _appref: ApplicationRef ) {
}
getSocialNetworks() {
var _that = this;
var url: string;
url = "/account_api"
this._dataservice.getDataByUrl(url)
.subscribe(
res => {
_that.socialNetworks = res;
this._appref.tick(); // force change detection
}, err => _that.logError(err)
)
}
至于 calling length on undefined
,由于您是异步提取数据的,因此您的 socialNetworks
属性未定义为启动。您可以将其初始化为一个空数组,例如@jacobs在答案中,或修改您的支票以说明它:
<div *ngIf="socialNetworks && socialNetworks.length > 1">