ngfor

Angular - How to get input value at ngFor loop with one way binding

核能气质少年 提交于 2019-12-25 01:44:18
问题 Can you give me a way to get input value at ngFor loop with one way binding? <div *ngFor="let d of dataList"> <input #inputValue type="text" [ngValue]="d.value"> <button *ngIf="!d.open" (click)="d.open = true">change</button> <button *ngIf="d.open" (click)="save(d.id, NEWVALUE); d.open = false;">save</button> <button *ngIf="d.open" (click)="d.open = false">cancel</button> </div>` How can I set NEWVALUE? with two-way binding is easy. but after click cancel, value already changed as I don't

How to remove duplicate records from NgFor Loop in Angular

折月煮酒 提交于 2019-12-25 01:28:22
问题 I am trying to remove duplicate records from a *ngfor loop and leave only the record with the most clicks for that record. The objective is to show click-through URLs from the user, but currently, when a new record for the same URL has been created, it displays in the list. See the image below: The clicks are working as expected, but the list will become illegible after a while. I'm trying to show e.g Product: Away Shirt, Click through URL https://blablabla Ad Clicks: 6, as this is the most

How to fix InvalidPipeArgument error when iterate *ngFor from Observable Array of Objects

江枫思渺然 提交于 2019-12-25 00:18:55
问题 I have an error when try to iterate *ngFor from Observable Array of Objects I use Angular 8 Chat messages Service private chatMessages = []; private chatMessagesStream = new BehaviorSubject(this.chatMessages); getMessages(): Observable<any> { return this.chatMessagesStream.asObservable(); } addMessage(chatMessage) { this.chatMessages.push(chatMessage); this.chatMessagesStream.next(this.chatMessages); } Chat View Component private chatMessages:Observable<Array<any>>; constructor( private

disable buttons in ngFor loop

爱⌒轻易说出口 提交于 2019-12-25 00:08:14
问题 I want to disable buttons inside by ngFor loop.I set the i-index inside ngFor but the issue is that it only disables the button with the id of i.If i want to disable multiple buttons inside this loop what should i do? Lets say i have 5 buttons.I want to disable the button number 1.After i want to disable 2.With this code when i change to 2 the 1 goes back to enable. <div *ngFor="let day of days let i=index"> <ion-button id={{day}} expand="block" size="large" (click)="test(day)"

selectedIndex not working in md-tab-group when dynamically generating tabs

橙三吉。 提交于 2019-12-24 10:58:49
问题 I am trying to set selectedIndex Property of md-tab-group in material for angular 2 so that I can get animated ink bar below first tab. It worked when tabs were statically defined <md-tab-group> <md-tab label="Tab 1">Content 1</md-tab> <md-tab label="Tab 2">Content 2</md-tab> </md-tab-group> But when I am generating md-tabs dynamically using *ngFor, its not working. <md-tab-group selectedIndex= 0 class="inner-tab"> <md-tab *ngFor="let rule of ruleList"> <ng-template md-tab-label>{

Angular 2: retreive data from a dynamic generated input by ngFor

狂风中的少年 提交于 2019-12-24 08:06:41
问题 Im generating some input="text" from array using ngFor , I need to retreive that info the user insert in those inputs and send by a button to a function. My code is the next one. Thank you for any help in advance. <div class="container"> <div class="well well-lg row"> <div class="form-group col-md-12 text-center"> <label class="col-md-12">Selección de Bucket</label> <ss-multiselect-dropdown class="col-md-12" [options]="buckets" [texts]="myTexts" [settings]="mySettings" (click)="selectBuckets

Angular 4 set the focus in the dynamic generated textbox using viewChildran

大兔子大兔子 提交于 2019-12-24 01:21:21
问题 I have the dynamically generated textbox as below. <tr *ngFor="let item of data; let in=index"> <td> <input #unitNumber type="text" name="workPerformed-workcode-{{in}}" [(ngModel)] = "item.unitnumber" > </td> <td> <!-- Search option is given to chose the unit number----></td> </tr> Here, the search option is given to choose the unit number, if it has been chosen, then the corresponding textbox will be focused on using viewChildran. My try is @ViewChildren('unitNumber') enteredUnitNumbers; //

Ionic2 + Angular2 - dynamic rate value with ion-icon star

▼魔方 西西 提交于 2019-12-24 01:17:47
问题 I'm trying to build a simple dynamic rate from 0 to 5 stars (and its middle values like x.5 [example 4.5] ) that receives a value from the javascript. I looked for something with *ngFor but I'm not understanding how that works. Can someone explain / help me? If it helps, for ionic, we have 3 type of stars available: <ion-icon name="star"></ion-icon> <ion-icon name="star-half"></ion-icon> <ion-icon name="star-outline"></ion-icon> For example if I receive from server a value rate = 3.5, it

Ionic 2 & collection-repeat

折月煮酒 提交于 2019-12-23 20:09:46
问题 I'm making *ngFor working well with Ionic 2 but I'd like to use collection-repeat 'cause it is more adapted to wide range of data. I'm loading the data in the construtor : import {Page, NavController, NavParams} from 'ionic-angular'; import {ListData} from './list-data'; @Page({ templateUrl: 'build/pages/list-browser/list-browser.html', providers: [ListData] }) export class ListBrowserPage { static get parameters() { return [[NavController], [NavParams], [ListData]]; // ]; } constructor(nav,

Use *ngFor index to group multiple iterations in one row

爱⌒轻易说出口 提交于 2019-12-23 17:27:31
问题 I've been trying to construct a dynamic input-dialog with multiple columns. Basicaly there's a list of fields and for every two fields I want to construct a row. My attempt looked like this (not even sure if this is possible) <div *ngFor="let f of fields; let i = index"> <div class="row" *ngIf="i % 2 = 1"> <div *ngFor="let field of [fields[i],fields[i+1]]"> <div class="col-3"><label>{{field.key}}</label></div> <div class="col-3"><input [(ngModel)]="object[field.key]"></div> </div> </div> <