logo
down
shadow

ngFor does not render my obersavle response, but it does inset old values I add to the array?


ngFor does not render my obersavle response, but it does inset old values I add to the array?

By : user2185282
Date : November 21 2020, 04:01 AM
it should still fix some issue Fixed it!!!
I needed to assign my response to a variable and then push it into this.openedRecipe.Receptregels, if I do that it works, if not it does not work.
code :
  splitLine(line: Receptregel, recipe: Recept) {
this.recipeService.splitRecipe(line._id, recipe._id);
this.recipeService.updatedRecipe.subscribe(updatedRecipe => {
  const newLine = updatedRecipe.newLines[0];
  const newLine2 = updatedRecipe.newLines[1];
  this.openedRecipe.Receptregels.push(newLine);
  this.openedRecipe.Receptregels.push(newLine2);
  }, err => console.log(err));
}


Share : facebook icon twitter icon
*ngFor two values from array

*ngFor two values from array


By : Steven Ricker
Date : March 29 2020, 07:55 AM
Does that help update
If you want to provide pipes by data, something like this should work:
code :
<td class="text-navy"
  *ngFor="let col of cols">
  {{col.type.tranform(tran[col.field])}}>
{{value | pipe:param}}
{{value | pipe:param[propName]}}
Does ngFor directive re-render whole array on every mutation?

Does ngFor directive re-render whole array on every mutation?


By : laciga
Date : March 29 2020, 07:55 AM
Does that help No , it re-renders only when the array itself is replaced by a different array instance.
update
convert http obervable response to array supported by ngFor

convert http obervable response to array supported by ngFor


By : amadou
Date : March 29 2020, 07:55 AM
I hope this helps you . I'm trying to load select option dynamically based on API response and for http request, I'm using obervables in Angular5. , Below will work:
code :
this.roleService.getRoles().subscribe(roles => {
  this.roles = roles;
});
<div>
  <h2>Hello {{name}}</h2>
</div>
<div class="container row">
  <div class="col-md-6">
    <form [formGroup]="userRegform" novalidate>
      <fieldset class="form-group">
        <select id="userrole" class="form-control " name="userrole" formControlName="userrole" data-live-search="true">
          <option *ngFor="let p of roles" [value]="p['ROLE_ID']">{{p['ROLE']}}</option>
        </select>
      </fieldset>
      <fieldset class="form-group">
        <select class="form-control selectpicker" data-live-search="true">
          <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
          <option data-tokens="mustard">Burger, Shake and a Smile</option>
          <option data-tokens="frosting">Sugar, Spice and all things nice</option>
        </select>
      </fieldset>
    </form>
  </div>
</div>
*ngFor iterating the values of the array

*ngFor iterating the values of the array


By : Kush Agrawal
Date : March 29 2020, 07:55 AM
I wish did fix the issue. It's not 3, it's the length of your comments array. You are iterating over the array of 3 items, it will always be 3 stars if there are 3 comments.
Add stars property to your comments:
code :
this.commentList = this.commentList.map(comment => Object.assign(comment, {stars: new Array(comment.Rate)}));
<ul class="list-inline ratingList" *ngFor="let x of comment.stars">
  <li >
    <i value="x"  class="fa fa-star fa-lg"></i> 
  </li>
</ul>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'toArray'})
export class ToArrayPipe implements PipeTransform {
  transform(value: number): any[] {
    return new Array(value);
  }
}
Using *ngFor to display string values from array

Using *ngFor to display string values from array


By : megaecki
Date : March 29 2020, 07:55 AM
With these it helps To make array from string with , delimiters use String.prototype.split method
code :
<tr *ngFor="let row of array">
  <td *ngFor="let info of row.split(',')">{{info}}</td>
</tr>
Related Posts Related Posts :
  • Test observable 'next' callback in RxJs and Angular
  • How to pass Form Control value to custom Validator Function's Parameter in Angular 5 Reactive Forms
  • Angular 6 - NullInjectorError: No provider for HttpClient in unit tests
  • How to get the text from a parent element only and not from its children - Protractor
  • Getter Methods on Deserialized Objects in Typescript
  • Child routes inside lazy loaded module not activated
  • Get "Day" of Selected Date in ngb-datepicker (ng Bootstrap) in Angular Application
  • Make nested HTTP calls from a Service Class and return Observable
  • Angular 6 reuse onclick event
  • Show loading indicator in Angular while waiting for a RxJS observable
  • ERROR TypeError: (intermediate value).share is not a function
  • angular 4 typescript validation error Object literal may only specify known properties
  • Angular, using one component in other two components
  • ngx-select-dropdown -- how to set default value for the dropdown? (angular 6.x)
  • Angular - reference child component dynamically
  • RXJS - Filter appears to filter, but results still show unfiltered
  • How to make changes on value which came with @Input - Angular
  • QR Scan in Angular
  • Angular / API consuming - request header - CORS proxy
  • Ng If does not work in observable variable in Angular 6
  • Angular Material 7: Link for whole row
  • How to customize PrimeNG TurboTable paginator?
  • ExpressionChangedAfterItHasBeenCheckedError when using ReactiveForms and NgbModal
  • Angular Material table with right-to-left direction
  • Angular 7 how to calculate the time a component take to completely load on the DOM
  • Observerable appending data over and over again on populate action
  • this is not a function - Angular 5
  • angular app runs in local tomcat but gives error in dev environment
  • Angular: Pass data from Material Dialog to component, which didn't open the dialog
  • Keep the the alert box without dismiss if there is an error
  • Textarea typing issue in ngFor in Angular 6
  • fxFlex angular flex layout not working as expected version 7.0.0-beta.19
  • Combine requests in series - Angular 7
  • Display table for dyanamically created row in angular 5
  • Concat variable name in angular cli using ngFor
  • Angular 5 'inputClick' is declared but its value is never read
  • Angular 7 - getting error as `Module parse failed: Unexpected character '@'` how to fix this?
  • RxJs subscribeTo.js observable check works in Chrome, but fails in Chrome Incognito, MS Edge, and Firefox
  • Getting the error: Could not find column with id "id"
  • Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks
  • Angular - use a service in a function and this function in a pipe
  • How to dynamically call the parent methods from child component?
  • Trigger same function in different component
  • Angular 7 error RangeError: Maximum call stack size exceeded
  • Maximum call stack size exceeded when adding PWA in Angular
  • angular reactive forms remove formArray elements after save
  • check whether angular array object has a specified value or not
  • While using moment in Angular 7 getting Error:TypeError: moment is not a function
  • Cannot set property 'filterPredicate' of undefined error in Angular Material Table
  • Angular 2+ Animation: Adding checkbox check effect to individual checkboxes that are generated by a loop
  • I am having issue in checking whether a username exists or not in my angular 6 application via api
  • How can I convert an ionic http GET request from @angular\Http to @ion-native\Http?
  • fa-icon is not a known element in a Reusable Module
  • Angular 6: Is it possible to pass a function as parameter?
  • Angular Reactive Forms with FormArray inside a nested FormGroup
  • Angular: Right way to wait for Async data to be loaded
  • NgRX effect called with empty state
  • How do you create a union type for a component's services?
  • Angular6 - Using service outside of constructor - error as undefined
  • How to import a service from another module in Angular 6
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org