如何将一个对象的值传递给另一个对象，已经作为 Angular 中的变量？

Question

我的 class 入站看起来像下面这样。

export class Inbound {
  constructor(
  public id: number,
  public incomingType: string,
  public quantity: number,
  public location: string,
  public arrived: Date,
  public bin: Bin,
  public truck: Truck,
  public supplier: Supplier
  ) {

HTML ->

<tr>
      <th>ID</th>
      <th>Incoming Type</th>
      <th>Quantity</th>
      <th>Location</th>
      <th>Arrived</th>
      <th>Bin</th>
      <th>Truck</th>
      <th>Supplier</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let inbound of inbounds">
      <td><span>{{inbound.id}}</span></td>
      <td><span>{{inbound.incomingType}}</span></td>
      <td><span>{{inbound.quantity}}</span></td>
      <td><span>{{inbound.location}}</span></td>
      <td><span>{{inbound.arrived}}</span></td>
      <td><span>{{inbound.bin.name}}</span></td>
      <td><span>{{inbound.truck.regNumber}}</span></td>
      <td><span>{{inbound.supplier.name}}</span></td>
      <td>

我在传递最后这 3 个变量时遇到问题，因为。我在 Java 中的代码有效，我已经检查了 Postman。 Angular 中的前端遇到了我身边的一些知识不足。方法 createNewInbound 在 Angular.

中不可见

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">New Inbound</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <div class="form-group">
        <label for="incomingType">Incoming Type</label>
        <div class="input-group">
          <input id="incomingType" name="incomingType" class="form-control" ngModel>
        </div>
      </div>
      <div class="form-group">
        <label for="quantity">Quantity</label>
        <div class="input-group">
          <input id="quantity" name="quantity" class="form-control" ngModel>
        </div>
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <div class="input-group">
          <input id="location" name="location" class="form-control" ngModel>
        </div>
      </div>
      <div class="form-group">
        <label for="arrived">Arrived</label>
        <div class="input-group">
          <input id="arrived" name="arrived" class="form-control" ngModel>
        </div>

        ***[FROM  HERE !!!]
      **</div>
      <div class="form-group">
        <label for="bin.name">Bin Name</label>
        <div class="input-group">
          <input id="bin.name" name="bin.name" class="form-control" ngModel>
        </div>
      </div>
      <div class="form-group">
        <label for="truck.regNumber">Truck Reg Number</label>
        <div class="input-group">
          <input id="truck.regNumber" name="truck.regNumber" class="form-control" ngModel>
        </div>
      </div>
      <div class="form-group">
        <label for="supplier.name">Supplier Name</label>
        <div class="input-group">
          <input id="supplier.name" name="supplier.name" class="form-control" ngModel>
        </div>


        [TILL  HERE!!!]*****
      </div>
      <div class="border text-center">
        <button data-dismiss="modal" class="btn btn-info">Submit</button>
      </div>
    </form>
  </div>

我意识到它可能看起来像 Butter butter 并且可能很耗时。如果有人愿意帮助我，这对我来说可能是一个很棒的新年惊喜。这是我的仓库 -> https://github.com/sroko1/Shipping-Bins.git。祝你有美好的一天和一年。我

Answer 1

您需要使用 ngModelGroup 指令。下面是代码片段：

      <div class="form-group" ngModelGroup="bin">   <!-- Added ngModelGroup="bin" -->
        <label for="bin">Bin Name</label>
        <div class="input-group">
          <input id="bin" name="name" class="form-control" ngModel>  <!-- Updated name attribute value  --> 
        </div>
      </div>
      <div class="form-group" ngModelGroup="truck">  <!-- Added ngModelGroup="truck" -->
        <label for="truck.regNumber">Truck Reg Number</label>
        <div class="input-group">
          <input id="truck.regNumber" name="regNumber" class="form-control" ngModel>  <!-- Updated name attribute value  -->
        </div>
      </div>
      <div class="form-group" ngModelGroup="supplier">  <!-- Added ngModelGroup="supplier" -->
        <label for="supplier.name">Supplier Name</label>
        <div class="input-group">
          <input id="supplier.name" name="name" class="form-control" ngModel>  <!-- Updated name attribute value  -->
        </div>
      </div>

这将帮助您在 onSubmit()

内达到预期的 f.value

如何将一个对象的值传递给另一个对象，已经作为 Angular 中的变量？

how to pass the value of an object to another object, already as a variable in Angular?

html

bootstrap-modal

angular