ngFor 不会将元素渲染到 IOS 浏览器中

Question

我正在尝试学习 Angular 并遵循 here 中描述的示例。它在我的桌面上运行良好（macOS 10.13.3 / Safari 11.0.3；Chrome 64.0）。

但是，当我通过 iphone (ios 11.2.5 / Chrome 64.0) 访问它时 -- 我使用 ng serve --host 0.0.0.0 启动它 --，页面没有完全呈现。

我修改了例子，增加了两个header，如下。正如您在图像中看到的，BOF 和 EOF 已渲染，但其中的 div 未渲染。

搜索，我发现我应该启用 polyfills。我遵循了 here 中的示例。我还修改了 main.ts 并包含了 import './polyfills.ts';

所以我的问题是如何配置 angular 以在两个平台 (desktop/mobile) 上显示内容？

编辑

似乎问题与填充 cars 变量的服务有关。我的组件看起来像：

export class CarListComponent implements OnInit {
  cars: Array<any>;

  constructor(private carService: CarService) { }

  ngOnInit() {
    this.carService.getAll().subscribe(data => {
      this.cars = data;
    });
  }
}

如果我手动填充数组而不是调用服务，则列表会正确呈现...

export const TEMP: any[] = [
  {
    name: 'Car 1'
  }, {
    name: 'Car 2'
  }, {
    name: 'Car 3'
  }
];

然后

  ngOnInit() {
      this.cars = TEMP;
  }

代码将适用于 IOS Safari/Chorme。问题不在于服务，因为如果我使用 console.log(data)，它表明它填充了有效信息。我认为问题与 Observable 有关...

<h2>BOF</h2>

<div *ngFor="let car of cars">
  {{car.name}}
</div>

<h2>EOF</h2>

版本：

Angular CLI: 1.6.7
Node: 8.9.4
OS: darwin x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.1
@angular/cli: 1.6.7
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.2.1
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Answer 1

听起来可能是变化检测问题。你在使用 ChangeDetectionStrategy.OnPush 吗？如果是这样，那么您需要在更改后手动调用 ChangeDetectorRef markForCheck()。或者您可以尝试使用 async 管道，这将放弃对 markForCheck()

的需要

ngOnInit() {
  this.cars = this.carService.getAll()
}

和

<h2>BOF</h2>

<div *ngFor="let car of cars | async">
  {{car.name}}
</div>

<h2>EOF</h2>

Answer 2

找到问题了，惭愧...

我的 getAll() 进入 car.service.ts 的方法指向 "localhost"...我只是将其更改为 IP，并且有效....

  getAll(): Observable<any> {
    return this.http.get('//10.10.10.10:8080/cars');
  }

ngFor 不会将元素渲染到 IOS 浏览器中

ngFor does not render elements into IOS browsers

angular

angular2-observables

polyfills