ngFor создает пустой контент — Angular 7 IVY

Я играю с angular 7 и ivy, и я не могу заставить цикл for выдавать какие-либо значения.

Мой код:

@Component({
  selector: 'app-asset-list',
  templateUrl: './asset-list.component.html',
  styleUrls: ['./asset-list.component.scss']
})
export class AssetListComponent implements OnInit {

  asset = {name: 'test'};
  assets: Asset[] = [this.asset];
  cols: any[] = [];


  colors: any[] = ['red', 'blue', 'yellow']; // EDIT: added this for debug

  constructor(private assetService: AssetService) {

  }

  ngOnInit() {
    // this.assetService.getAssets().subscribe((value => this.assets = value));
    this.cols = [
      {field: 'name', header: 'Name'}
    ];
  }

}

мой HTML:

<h3>Asset List</h3>

<!--DEBUG-->
{{ assets | json }}
{{ cols |json}}

<!--Does not show-->
<div *ngIf="assets.length > 0">
  Oh, its greater than 0.
</div>

<!--also does not show-->
<ul>
  <li *ngFor="let a of assets">
    {{a}}
  </li>
</ul>

<!--also does not show-->
<ul>
  <li *ngFor="let c of cols">
    {{c}}
  </li>
</ul>

<!--EDIT: added for debug... also does not show?-->
<ul>
  <li *ngFor="let c of colors">
    {{c}}
  </li>
</ul>

<!--ultimately, this is what I wanted, but the above don't even work-->
<p-table [value]="assets">
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of cols">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-asset>
    <tr>
      <td *ngFor="let col of cols">
        {{asset[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

и вывод:

выход

Как видите, я выдрал Observable, возвращенный из сервиса, и он все равно не работает. Я ожидаю увидеть что-то на экране, так как строка отладки показывает что-то. Что мне не хватает?

Я добавил массив строк colors только для дополнительной проверки работоспособности... который все еще не отображается. Ошибок в консоли нет.

Мои зависимости package.json:

"dependencies": {
    "@angular/animations": "7.2.4",
    "@angular/common": "7.2.4",
    "@angular/compiler": "~7.2.4",
    "@angular/core": "7.2.4",
    "@angular/forms": "7.2.4",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "primeicons": "^1.0.0",
    "primeng": "^7.0.5",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "7.2.4",
    "@angular/language-service": "7.2.4",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }

Я не мог воспроизвести в stackblitz ... проблема связана с плющом, я думаю. При этом вот стек-блиц.


person Jeff    schedule 14.02.2019    source источник
comment
Можете ли вы добавить stackblitz, воспроизводящий эту ошибку? Я сделал один, и все работает нормально - почти уверен, что проблема не в вашем * ngFor или в том, как вы создаете переменные. Я уверен, что вы проверяли, но есть ли ошибки компиляции/ng serve?   -  person Nathan Beck    schedule 14.02.2019
comment
Я переделал свой код в stackblitz, но он работает... не может воспроизвести. Нет ошибок ng serve или ng build.   -  person Jeff    schedule 14.02.2019
comment
Я предполагаю, что это плющ каким-то образом, поскольку я не думаю, что stackblitz использует плющ.   -  person Jeff    schedule 14.02.2019
comment
Я отправил его на битбакет: bitbucket.org/JDELL64/imagedam/src/master   -  person Jeff    schedule 14.02.2019
comment
Это очень плохо - надеялся, что это какая-то тихая ошибка компиляции. Должно быть что-то с Айви, хотя я не вижу активных проблем с *ngForOf   -  person Nathan Beck    schedule 14.02.2019
comment
Ага... Я удалил Айви, и она заработала... не знаю, в чем причина?   -  person Jeff    schedule 14.02.2019


Ответы (2)


Я столкнулся с той же самой проблемой при запуске флага --experimentalIvy в новом проекте CLI.

Я также создал задачу: https://github.com/angular/angular/issues/30081

С учетом сказанного я попытался обновить ядро ​​​​и cli до следующей версии, используя:

ng update @angular/core@next @angular/cli@next

И это работает на V8.0.0-beta.14, так что... я не уверен, что кто-то исправит это в версии 7, пока 8 близка к выпуску.

Также создан репозиторий Github с отдельными ветками для удобства воспроизведения, вы можете проверить его здесь: https://github.com/eliraneliassy/ivy-ngfor-bug

person Eliran Eliassy    schedule 24.04.2019
comment
Я бы сказал, что если это исправлено в 8, то этого достаточно. - person Jeff; 25.04.2019

Возможно, вам потребуется получить доступ к свойству с помощью оператора точки, чтобы увидеть вывод, иначе это будет просто [Object Object]

<ul>
  <li *ngFor="let a of assets">
    {{a.name}}
  </li>
</ul>

STACKBLITZ

person Sajeetharan    schedule 14.02.2019
comment
К сожалению, это также ничего не отображает. Кроме того, почему ни один из других div не работает? - person Jeff; 14.02.2019
comment
вы проверяли стекблиц? вероятно, вы показываете нам другой код, тогда - person Sajeetharan; 14.02.2019