logo
down
shadow

Concat variable name in angular cli using ngFor


Concat variable name in angular cli using ngFor

By : user2185260
Date : November 21 2020, 04:01 AM
I wish did fix the issue. using ngFor and its index I need to call unique variables. How can I concat the variable name in the HTML using the value of the index? , You can manage it via creating a new property in project
code :
<div *ngFor="let project of _data; let i = index">
  {{project.name}}
  <button (click)="project['status'] = !project['status']">Toggle Me</button>
</div>


Share : facebook icon twitter icon
Add a value to the i variable of Angular's ngFor

Add a value to the i variable of Angular's ngFor


By : 要笑娟
Date : March 29 2020, 07:55 AM
should help you out I want to create two rows of five inputs using ngFor. I want to store the inputs in an array so I figured I would use the index in the ngModel. However, when I try to add a value for the second row to the let i = index, I get Template parse errors. , It can be achieved so:
code :
 <div class="col-md-5ths" *ngFor="let number of [0,1,2,3,4]; let i = index">
      <input type="text" [(ngModel)]="input[i+row]">
      {{input[i+row]}}
 </div>
Concat two *ngfor variables in interpolation angular 4

Concat two *ngfor variables in interpolation angular 4


By : TheGringott
Date : March 29 2020, 07:55 AM
it helps some times , you can try this
code :
<div *ngFor="let profile of allSupprotProfiles">
  <div *ngFor="let columnName of defaultColumns >
      <tr> <th>{{columnName}}</th> <td>{{ profile[columnName] }}</td> </tr>
  </div>
</div>
Angular 6 and Angular Material - mat-radio-group [(ngModel)] set dynamic variable inside *ngFor

Angular 6 and Angular Material - mat-radio-group [(ngModel)] set dynamic variable inside *ngFor


By : Bharath Raj Herur
Date : March 29 2020, 07:55 AM
I wish this helpful for you You were using the same variable (mySelection) for both questions. Instead, you need to use two different variables, or even better, an array. Here's the fixed version on StackBlitz and here's the relevant code.
Template
code :
<ol>
    <li *ngFor="let poll of polls;let i = index">
        {{poll.name}}

        <mat-radio-group class="example-radio-group" [(ngModel)]="selectedAnswers[i]">
            <mat-radio-button class="example-radio-button" *ngFor="let option of poll.options" [value]="option.answer">
                {{option.answer}}
            </mat-radio-button>
        </mat-radio-group>
    <strong>Seleted Answer : {{selectedAnswers[i]}}</strong>
    <button  [disabled]="selectedAnswers[i]==undefined" mat-raised-button color="accent">save</button>
  </li>
</ol>

<pre>{{ selectedAnswers | json }}</pre>
@Component({
  /* ... */
})
export class AppComponent  {

  selectedAnswers = []

  polls = [
    /* ... */
  ]
}
Attach variable to *ngFor angular 4

Attach variable to *ngFor angular 4


By : SittingPilgrim
Date : March 29 2020, 07:55 AM
hope this fix your issue I think its best practice to have myLocalVariable actually stored in the component, not in the template.
I would probably do something like this:
Angular 4 ngFor variable to hold value

Angular 4 ngFor variable to hold value


By : Giuseppe Cinque
Date : March 29 2020, 07:55 AM
To fix the issue you can do I have the following code: , Yes, just nest another iterator:
code :
<ng-container *ngFor="let item of items">
  <ng-container *ngFor="let subItem of item.subArray">
    <div>{{subItem.attr1}}</div>
    <div>{{subItem.attr2}}</div>
  </ng-container>
</ng-container>
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
  • ngFor does not render my obersavle response, but it does inset old values I add to the array?
  • 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