Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular NgFor elements not rendering in Safari (10.1.2) and iOS browsers #21067

Closed
Hisairnessag3 opened this issue Dec 17, 2017 · 4 comments
Closed

Angular NgFor elements not rendering in Safari (10.1.2) and iOS browsers #21067

Hisairnessag3 opened this issue Dec 17, 2017 · 4 comments
Labels
area: core Issues related to the framework runtime

Comments

@Hisairnessag3
Copy link

Hisairnessag3 commented Dec 17, 2017 •
edited

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Elements in the ngFor bindings do not properly render on Safari for iOS and android.

Expected behavior

Proper rendering of elements.

Minimal reproduction of the problem with instructions

as you can see I have the required polyfills
live website: trumpfreenews.co

Code:

home.component.ts

this.feedservice.getFeedContent2(this.feedUrl)
    .subscribe(
    feed =>{
  if (this.notrumpcookie == 'yes'){
  this.field = feed.items.filter(feed=> feed.content.indexOf(substring) !== -1) 
  this.trumpContent = feed.items.filter(item=> this.field.indexOf(item) < 0) 
  this.feeds = this.trumpContent;
  }else if(this.sometrumpcookie == 'yes'){
    this.small = feed.items.filter(feed=> feed.title.indexOf(substring) !== -1) 
  this.trumpTitle = feed.items.filter(item=> this.small.indexOf(item) < 0)
  this.feeds = this.trumpTitle;
}else{
  this.feeds = feed.items;
}

},
 error => console.log(error));
}

home.component.html

<app-feed-card2 *ngFor="let feed of feeds2 | slice:1:2" [feed]="feed" ></app-feed-card2>
<h1> TOP STORIES </h1>
<div class="jumbotron">
<app-feed-card *ngFor="let feed of feeds" [feed]="feed" ></app-feed-card>
</div>
<div id="fries"></div>
<trump-slider></trump-slider>

index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

polyfills.ts


import 'core-js/es7/reflect';

import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'intl';
import 'intl/locale-data/jsonp/en';

safari view:

screen shot 2017-12-16 at 5 37 35 pm

chrome view:

screen shot 2017-12-16 at 5 38 09 pm

Environment


Angular version: 4.3.6


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [X] Safari (desktop) version XX
- [X] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Mac OS X: 10.12.6
node: 8.9.2

Others:
@alxhub alxhub added the area: core Issues related to the framework runtime label Dec 19, 2017
@Hisairnessag3
Copy link
Author

Still having issue with latest update to 5.1.1

@chuckjaz
Copy link
Contributor

I'm sorry but we can't reproduce the problem following the instructions you provided.

If the problem still exists please open a new issue following our submission guidelines.

@Hisairnessag3
Copy link
Author

Um, I find it pretty hard to believe you tried to reproduce this but here is the new issue: #21099

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: core Issues related to the framework runtime
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@chuckjaz @alxhub @Hisairnessag3