ngFor不会将元素呈现到IOS浏览器中

Question

I'm trying to learn Angular and followed the example described here . It works fine into my desktop (macOS 10.13.3 / Safari 11.0.3; Chrome 64.0).

However, when I access it through an iphone (ios 11.2.5 / Chrome 64.0) -- I started it using ng serve --host 0.0.0.0 --, the page does not render completely.

I modified the example and added two headers, as follows. As you can see into the image, BOF and EOF are rendered, but the div inside it aren't.

Searching, I found that I should enable polyfills. I followed examples from here . I also modified main.ts and included import './polyfills.ts';

So my question is how do I configure angular to display content on both platforms (desktop/mobile)?

EDIT

Seems that the problem is related with the service that populates the cars variable. My component looks like:

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

  constructor(private carService: CarService) { }

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

If, instead calling the service, I manually populate the array, the list is properly rendered...

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

And then

  ngOnInit() {
      this.cars = TEMP;
  }

The code will work on IOS Safari/Chorme. The problem is not with the service, because if I use console.log(data) , it shows that it is filled with valid information. I think the problem is related to Observable...

<h2>BOF</h2>

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

<h2>EOF</h2>

Versions:

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

Sounds like it might be a change detection issue. Are you using ChangeDetectionStrategy.OnPush ? If so, then you'd need to manually call ChangeDetectorRef markForCheck() after changes. Or you might try using the async pipe, which would forgo the need for markForCheck()

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

and

<h2>BOF</h2>

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

<h2>EOF</h2>

Answer 2

I found the problem, and I'm ashamed...

My getAll() method into car.service.ts was pointing to "localhost"... I just changed it to an IP, and it worked....

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