如何获得所需的输出作为自定义对象数组？

Question

你好，我正在研究 Angular 8，所以我遇到了一个问题，我有这样简单的 api 数据：

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

因此，对于每个学生，我想给予和发送权重并将数据发送给另一个 api 所以我的样本预期结果应该是

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

这是示例stackblitz

Answer 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}}

礼貌：Sujendra Shrestha (Suzanne.2009@gmail.com)

如何获得所需的输出作为自定义对象数组？

How to get a desired output as custom array of objects?

angular

angular7

angular8

angular9

angular10