Question

我有一个项目，前端是通过@angular/cli: 1.1.3开发的。一切正常，直到我尝试在prod模式下编译项目（ng build -prod）。在我使用*ngFor指令和trackBy令牌的地方，我得到了像这样的错误

... src / app / app.component.ts.AppComponent.html（4,11）：属性'p' “AppComponent”类型中不存在。

如果我删除'trackBy'语句错误将消失。我在空白项目中重复了这个错误，将它附在此处。

AppComponent 类声明：

import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs/Rx";
@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let p of ppp | async;trackBy: p?.s">
        <h2>{{p.s}}</h2>
      </li>
    </ul>`,
})
export class AppComponent implements OnInit {
  ppp: Observable<any[]>;
  constructor() {
  }
  ngOnInit() {
    this.ppp = Observable.create((observer) => {
      observer.next([{s: "0"}]);
      setTimeout(function () {
        observer.next([{s: "1"}, {s: "2"}, {s: "3"}]);
      }, 2000);
    });
  }    
}

AppModule 类声明：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

是否有成功调用ng build -prod并保留 trackBy 语句的方法;

Answer 1

trackBy必须是组件上的函数值属性。阅读the documentation，这是非常清楚的。

向返回值NgFor应跟踪的组件添加方法。

<li *ngFor="let p of ppp | async; trackBy: trackByS">
    <h2>{{p.s}}</h2>
</li>

public trackByS(p) { return p.s; }

即使没有使用AoT进行编译，代码的trackBy部分实际上也没有按照您的想法执行。 trackBy: p?.s尝试访问组件上的属性p，该属性不存在，因此被忽略。只是AoT编译模板逻辑，暴露了错误。

在ngFor trackBy中，类型'T'上不存在属性'p'

1 个答案: