无法使用 Angular 2/4 查看表单中的数据

Question

我从我的 MongoDB 后端获取数据，数据显示在浏览器控制台中。我设法使用.但不会以 Angular 形式显示。我不知道我应该使用哪种格式。我尝试了很多格式，但都不起作用。

我需要在表单中显示itemName 和itemType。请帮我。

这是 Component.ts 文件：

import { NgModule,Component,Pipe,OnInit,OnChanges,SimpleChanges} from '@angular/core';
import { ItemAllocationService } from '../../../services/item-allocation.service'

@Component({
  selector: 'app-allocation',
  templateUrl: './allocation.component.html'
})
export class AllocationComponent implements OnInit {

  constructor(public itemallocationservice:ItemAllocationService) { }
  itemId:Number;
  itemName:String;
  userId:Number;
  userName:String;
  ngOnInit() {
  }
  saveallocationdata(){   

    const allocateitem = {
      itemId:this.itemId,
      itemName:this.itemName,
      userId:this.userId,
      userName:this.userName
    };


     this.itemallocationservice.itemallocationdata(allocateitem).subscribe(res=>{
      console.log(res);
    }); 

    }
  public x;
    getItem(){
      let x =this.itemallocationservice.getItemData(this.itemId).subscribe(data=>{
        console.log(data);

      })
    }


}

HTML 文件：

<form name="reportitem" (ngSubmit)="saveallocationdata()">

<ba-card>
    <div class="form-group">
        <label>Item ID</label>
        <input type="text" class="form-control" (keyup)="getItem()" [(ngModel)]="itemId" name="itemId">

    </div>
    <div class="form-group">
        <label f>Item Name</label>
        <input type="text" class="form-control" [(ngModel)]="itemName" name="itemName">
    </div>
    <div class="form-group">
        <label>Enter the User Details to Allocate the Above Item</label>
    </div>
    <div class="form-group">
        <label>User ID</label>
        <input type="text" class="form-control" [(ngModel)]="userId" name="userId">
    </div>
    <div class="form-group">
        <label>User Name</label>
        <input type="text" class="form-control" [(ngModel)]="userName" name="userName">
    </div>


    <button type="submit" class="btn btn-primary">Allocate</button>
</ba-card>


</form>

Answer 1

每个表单项对应于您分配的变量。例如，您的 UserID 表单具有 userId 的 ngModel。因此，在您的订阅方法中（您有 console.log(data)），您需要将 userId 分配给 this.userId。例如：

getItem(){
    this.itemallocationservice.getItemData().subscribe(data=>{
        console.log(data);
        this.itemId = data.itemId;
        this.itemName = data.itemName;
      });