我能够在Angular 8的输入字段中显示从API获取的数据,但在控制台中出现错误

我正在使用一个反应式表单,我从api中获取数据并在输入字段的html中显示,但我在控制台中得到一些错误。需要帮助解决。

以下是HTML代码

 <form [formGroup]="homeForm" class="form-horizontal" (ngSubmit)="continue(homeForm.value)">
                <div class="form-group">
                    <label class="control-label" class="text">Officer Name</label>
                    <input type="text" class="form-control" formControlName="oName" value={{this.home[0].oName}} readonly>
                </div>
                <div class="form-group">
                    <label class="control-label" class="text">Officer ID</label>
                    <input type="text" class="form-control" formControlName="oIDNum" readonly>
                </div>
  div align="end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

以下是TS文件的代码

   import { Component, OnInit } from '@angular/core';
   import { FormControl, FormGroup } from '@angular/forms';

   import{Router} from '@angular/router';
   import { ApiService } from '../app.service';


   @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {

  home:any

  constructor(private route:Router,private apiService:ApiService) { }

  ngOnInit() {
    this.apiService.getData().subscribe((data)=>{
    this.home = data;
    console.log(this.home);
    })

  }
 homeForm = new FormGroup({
   oName:new FormControl(''),
   oIDNum:new FormControl(''),
   })
 continue(value){
  console.log(value);
  this.route.navigate(['/form']);
  }
 }

这是服务文件

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';

  @Injectable({
  providedIn: 'root'
  })
 export class ApiService {

 constructor(private httpClient: HttpClient) { }
 public getData(){
  return this.httpClient.get(`http://localhost:3000/officer`);
 }
}

我使用的JSON文件数据如下所示

{
 "officer":[ {
"oName": "Example",
"oIDNum": "1"
}]
}

error in console

解决方案:

你可以删除html中的值

   value={{this.home[0].oName}}

在TS文件中,你需要这样写……。

 ngOnInit() {
    this.apiService.getData().subscribe((data)=>{
    this.home = data;

    this.homeForm = new FormGroup({
    oName:new FormControl(this.home[0].oName),
    oIDNum:new FormControl(this.home[0].oIDNum),
    })
  })
 }

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何用cv2.imwrite从不同文件夹的多个视频中保存帧?

2022-10-25 16:41:38

未分类

当使用导航组件时,如何覆盖工具栏中后退按钮的行为?

2022-10-25 16:41:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索