Quantcast
Channel: ngFor does not render elements into IOS browsers - Stack Overflow
Viewing all articles
Browse latest Browse all 3

ngFor does not render elements into IOS browsers

$
0
0

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>

enter image description here

Versions:

Angular CLI: 1.6.7Node: 8.9.4OS: darwin x64Angular: 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.17typescript: 2.5.3webpack: 3.10.0

Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images