नमस्ते, मैं कोणीय 8 पर काम कर रहा हूं, इसलिए यहां मुझे एक समस्या आई और मेरे पास इस तरह का सरल एपीआई डेटा है:

this.inputData = [
      {
        id: 1,
        name: "john"
      },
      {
        id: 2,
        name: "joe"
      },
      {
        id: 3,
        name: "juke"
      }
    ];

इसलिए और प्रत्येक छात्र के लिए मैं वजन देना और भेजना चाहता हूं और डेटा को दूसरे एपीआई को भेजना चाहता हूं, इसलिए मेरा नमूना अपेक्षित परिणाम होना चाहिए

 [{
     nameID: 1,weight:22
     },
     {
     nameID: 2,weight:22
     }
     {
     nameID: 3,weight:22
     }
     ]

यहां नमूना है stackblitz

0
kishan 21 अप्रैल 2021, 11:14
आप ngFor लूप के साथ टैग नहीं बना सकते क्योंकि आपको प्रत्येक इनपुट टैग को अलग से हैंडल करना होता है।
 – 
Vinay Somawat
21 अप्रैल 2021, 11:23

1 उत्तर

सबसे बढ़िया उत्तर

https://stackblitz.com/edit/angular-ivy-ayczfn?file=src%2Fapp%2Fapp.component.html

App.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  inputData: any = [];
  weightperson: any;
  outputdata: any = [];

  constructor() {
    this.getApiData();
  }

  getApiData() {
    this.inputData = [
      {
        id: 1,
        name: "john"
      },
      {
        id: 2,
        name: "joe",
        weight: 44
      },
      {
        id: 3,
        name: "juke"
      }
    ];
  }

  getOutput() {
    this.outputdata = this.inputData.map(x => {
      return {
        nameID: x.id,
        weight: x.weight
      };
    });
    // expectedOutput is
    // [{
    // nameID: 1,weight:22
    // },
    // {
    // nameID: 2,weight:22
    // }
    // {
    // nameID: 3,weight:22
    // }
    // ]
  }
}

App.component.html

  <div class="container pt-5 pb-5">
  <div class="row pt-5">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th scope="col">name</th>
          <th scope="col">Weights</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of inputData; let i = index">
          <td>{{ row.name }}</td>
          <td>
            <input type="text" name="weightperson" class="form-control" [(ngModel)]="row.weight">
          </td>
        </tr>
        <button (click)="getOutput()">Submit</button>
      </tbody>
    </table>
  </div>
</div>
{{outputdata | json}}

साभार: सुजेंद्र श्रेष्ठ (sujen.2009@gmail.com)

0
Rohan Baidya 21 अप्रैल 2021, 11:28