Angular:方法表达式的打印结果

Question

我正在尝试将常见的 HTML 结构(如引导导航栏)导出到 Angular 组件中。这是我的组件 HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">{{navBarTitle}}</a>
    </div>
    <ul class="nav navbar-nav">
      <li *ngFor="let item of navBarItems">
        <a href="#">{{item.display()}}</a> <!-- The Problem is here -->
      </li>
    </ul>
  </div>
</nav>

这是组件类:

@Component({
  selector: 'bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent implements OnInit {

  @Input() private navBarTitle: string = "Klassenliste";
  @Input() private navBarItems: Clazz[] = [];

  constructor() { }

  ngOnInit() {
  }

}

用法如下所示:

<bs-navbar
  navBarTitle="Classes"
  [navBarItems]="classes">
</bs-navbar>

需要注意的重要一点是 classes 数组是从ngOnInit() 中的服务器使用 HttpModule。

this.getClasses()    // returns an Observable<Clazz[]>
      .catch(error => {
        console.error(` * ERROR * : ${error}`);
        throw new Error(error);
      })
      .subscribe((clazzes: Clazz[]) => {
        console.log(`Fetched classes`);
        console.log(clazzes);
        this.classes = clazzes;
      });
  private getClasses(): Observable<Clazz[]> {
    return this.http
      .get("/api/classes")
      .map(response => response.json() as Clazz[]);
  }

集合 navBarItems 中的项目确实实现了 display 方法:

export class Clazz { // Edited to "Clazz", just in case
    id: number;
    name: string;

    // constructor etc.

    display(): string {
        if(this.name) {
            return this.name; 
        }
        return "---";
    }
}

但是，当我运行它时，{{item.display()}} 调用似乎没有返回任何内容。该链接仅显示为空文本。当我用 {{item.name}} 替换 {{item.display()}} 调用时，名称显示正确。但是，我希望此设置适用于任何实现 display() 方法的类。

控制台抛出以下错误:

ERROR TypeError: _v.context.$implicit.display is not a function
    at Object.eval [as updateRenderer] (BsNavbarComponent.html:8)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14727)
    at checkAndUpdateView (core.js:13841)
    at callViewAction (core.js:14187)
    at execEmbeddedViewsAction (core.js:14145)
    at checkAndUpdateView (core.js:13837)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callViewAction (core.js:14187)

抱歉，如果我在这里遗漏了一些明显的东西，我是 Angular 的新手。

Answer 1

如果您只是将 JSON 对象类型转换为类 []，如:

response.json() as Clazz[]

.. 你没有得到所有的类方法。它只是向 Typescript 表明该类型是兼容的。请记住，Typescript 会编译为 JavaScript，这不允许您直接将 json 解析为函数或 ES6 类。

您需要遍历每个项目，实例化该类的新实例，并从那里填充数据。