Question

我正在学习Angular 2并尝试按照他们的教程进行操作。这是返回模拟对象Folder的“Promise”的服务代码。

import {Injectable, OnInit} from "@angular/core";
import {FOLDER} from "./mock-folder";
import {Folder} from "./folder";
@Injectable()
export class FolderService {
  getFolder():Promise<Folder>{
    return Promise.resolve(FOLDER);
  }
}

它在我的FolderModule的提供者中声明

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FolderComponent} from "./folder.component";
import {MaterialModule} from "@angular/material";
import {FolderService} from "./folder.service";
@NgModule({
  imports:[CommonModule, MaterialModule.forRoot()],
  exports:[FolderComponent],
  declarations:[FolderComponent],
  providers:[FolderService]
})
export class FolderModule{

}

文件夹组件应导入FolderService并使用它来获取Folder对象。

import {Component, OnInit} from "@angular/core";
import {Folder} from "./folder";
import {FolderService} from "./folder.service";
@Component({
  selector: 'folder',
  moduleId: module.id,
  templateUrl: "./folder.component.html"
})
export class FolderComponent implements OnInit {
  folder:Folder;

  constructor(private folderService:FolderService) {
  }
  ngOnInit():void {
    this.getFolder();
  }
  getFolder() {
    this.folderService.getFolder().then((folder) => this.folder = folder);
  }
}

是的，我确实在根模块中导入了我的FolderModule

@NgModule({
  imports: [BrowserModule, CommonModule, MaterialModule.forRoot(), FolderModule, AppRoutingModule],
  providers:[],
  declarations: [AppComponent, LifeMapComponent, MyPageNotFoundComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

这是文件夹组件模板

<md-grid-list cols="3" [style.background] ="'lightblue'" gutterSize="5px">
  <md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>
</md-grid-list>

这是我在控制台中得到的错误

EXCEPTION：未捕获（承诺）：错误：错误 http://localhost:3000/app/folders/folder.component.html:1:16导致了 by：无法读取未定义TypeError的属性'cards'：无法读取属性'卡'未定义

export class Folder {
  public id:number;
  public title:string;
  public cards:Card[];
}

export class Card{
  id :number;
  title:string;
}

Answer 1

Voland，

这可以通过使用＆＃34; Elvis＆＃34;正在迭代的集合上的运算符。

<md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>

应改为：

<md-grid-tile *ngFor="let card of folder?.cards">{{card?.title}}</md-grid-tile>

注意＆＃34;？＆＃34;在文件夹之后 - 这将强制整个路径为＆＃39; null＆＃39;，因此它不会迭代。问题在于null对象上的访问器。

你也可以将文件夹声明为空数组[]以防止这种情况发生。

编辑：对于任何旁观者，请注意您的Typescript代码中没有Elvis运算符，因为该语言不支持该运算符。我相信Angular 2支持它，所以它在你的视图中可用（对于AJAX请求非常有用，你的数据尚未到达组件实例化的位置！）

Answer 2

使用*ngIf指令：

<md-grid-list *ngIf="folder" cols="3" [style.background] ="'lightblue'" gutterSize="5px">
  <md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>
</md-grid-list>

Angular尝试在解析promise之前呈现html，因此folder为undefined并抛出异常。
使用*ngIf="folder"，您告诉Angular如果表达式是假的，它应该忽略子元素。

如果<md-grid-tile *ngFor="let card of folder.cards">{{card.title}}</md-grid-tile>不是folder，

undefined将被添加到DOM中。

Answer 3

您的错误出现在课程中：

export class Folder {
  public id:number;
  public title:string;
  public cards:Card[];
}

export class Card{
  id :number;
  title:string;
}

你忘记了构造函数：

export class Folder {
  constructor( 
     public id:number,
     public title:string,
     public cards:Card[])
  {}
}

export class Card{
  constructor( 
    public id :number,
    public title:string)
  { }
}

可能如前所述使用elvis运算符或ngIf。

Angular 2组件DOM在OnInit方法中解析bean之前绑定到组件中的属性

3 个答案: