How properly bind an array with ngModel from ngFor loop in angular?

Question

Am using ngModel inside of an ngFor loop to get values from a single input box like so :

  <mat-card class="hours"  >
  <table id="customers">
      <thead >
          <th >Project</th>
          <th *ngFor="let day of weeks">{{day | titlecase}}</th> //weeks is one week dates
          <th>Total Hours</th>
          <th></th>
      </thead>

      <tbody>
        <tr *ngFor="let employee of projectTasks; let i = index">
            <td>{{employee.Project}}</td>
            <td *ngFor="let day of weekdays"> //weekdays are monday to saturday
                <input type="number" [id]="day" [(ngModel)]="employee[day]" class="hours-input">
            </td>
            <td class="total-cell">{{getTotalHours(employee)}}</td>
            <td>
              <button mat-icon-button class="codered" (click)="deleteproject(employee, i)" >
                  <mat-icon >delete</mat-icon>
              </button>
          </td>

        </tr>

      </tbody>

  </table>
  <button mat-raised-button color="primary" class="submit" (click)="CreateTimeSheet()" >Submit</button>

My typescript:

 addProject(): void {
    this.pProjectId++;
  this.projectTasks.push({

    projectId: this.projectData[0].projectdetails[0]._id,
    Project: this.selected,
    monday: 0,
    tuesday: 0,
    wednesday: 0,
    thursday: 0,
    friday: 0,
    saturday: 0,
    sunday: 0,
  });
  console.log(this.projectTasks, "entered data");     
  }

bind an array with ngModel in ng for loop please refer to the image i have attached can any one help me out how to do any help appreciated.

Binding like this should work. How is the Weekdays array defined? What do you expect to happen? what is happening? Are you seeing any console errors? — JeffryHouser
– JeffryHouser, Commented Nov 3, 2021 at 2:17
Hi weekdays array defined as -- weekdays: string[] = ["monday", "tuesday", "wednesday","thursday","friday","saturday","sunday"]; no console errors @JeffryHouser — aryana
– aryana, Commented Nov 3, 2021 at 17:05

Jai Saravanan · Accepted Answer · 2021-11-06 11:14:51Z

2

We need to use trackBy on ngFor as below and I have added the Plnkr example link.

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="toDos[index]" type="number" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =[1,2,3];
  constructor() {}
  ngOnInit() {}
  trackByIndex(index: number, obj: any): any {
    return index;
  }
}

Example Plnkr

Thanks

edited Nov 6, 2021 at 11:14

answered Nov 3, 2021 at 3:14

Jai Saravanan

4434 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aryana Over a year ago

Hi it works for now but my concern is , how to get total value if i have numbers instead of string toDos: [] =["1","2","3"]; @Jai Saravanan

Jai Saravanan Over a year ago

Hi @aryana, I have updated the above answer & Plnkr example link to use the number instead of the string. plnkr.co/edit/nqmCuKUdRhWwF2X3?preview Kindly check it and if the answer is useful please upvote and support. Thanks.

aryana Over a year ago

Hi @Jai Saravanan my concern is how to display and get sum of total toDos = 5 and thanks for helping me and sorry for late response

Collectives™ on Stack Overflow

How properly bind an array with ngModel from ngFor loop in angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related