Question

我试图在模板中创建一个if语句，以便在数组长度<1时显示某个文本块。 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语句来查看this.socialNetworks的值，它也表示未定义。但在调试器中，我可以看到this.socialNetworks的值未定义。

所以我的问题是，我只是错误地引用了全局变量，还是我错过了/误解了所有的东西？

Answer 1

在我看来，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)
      )
  }

Answer 2

如果api调用使用了一些外部库，它可能不会被连接到角度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，由于您异步提取数据，因此<div *ngIf="socialNetworks && socialNetworks.length > 1">属性未定义以启动。你可以将它初始化为一个空数组，就像在@JacobS的答案中一样，或修改你的支票来解释它：

{{1}}

Angular 2组件全局变量未定义？

2 个答案: