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.display()}}替换{{item.name}}来电时，名称会正确显示。但是，我希望此设置可以与任何实现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类。

您需要迭代每个项目，实例化该类的新实例，并从那里填写数据。

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

1 个答案: