Angular 来自 ngModel 的数组值 Bin 给出错误

Question

我正在尝试使用 *ngFor 将来自 API 的值绑定到 HTML 这是代码

HTML

<nb-card accent="info">
  <nb-card-header>Item Quantity</nb-card-header>
  <nb-card-body>
    <div *ngFor="let location of StoreLocations;let i=index">
      <div class="row text-box-margin" >
          <div class="col-md-5">
              <p class="label-margin">Quantity for {{location.label}}</p>
          </div>
          <div class="col-md-7">
            <input type="text" nbInput fullWidth status="primary" [(ngModel)]="location.quantity"  placeholder="Quantity">
          </div>
        </div>
    </div>

  </nb-card-body>
</nb-card>

StoreLocations = new Array() 数组定义为this.and这里是ILocationInfo

的定义

export class ILocationInfo
{
  value = new String;
  label = new String;
  street = new String;
  unit = new String;
  city = new String;
  zip = new String;
  state = new String;
  country = new String;
  quantity = new Number;
  selected = new Boolean;

}

数组将使用 angular 解析器填充。当存在表单加载值时

构造函数代码

  constructor(private apiservice : ApiServiceService,private route: ActivatedRoute, private formbuilder:FormBuilder) {

    this.route.data.pipe(map((data:any)=>data.cres)).subscribe((locations : Array<ILocationInfo>)=>{
      console.log(locations);
      this.StoreLocations = locations;

    });
   }

我收到错误

core.mjs:6495 ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
    at throwProviderNotFoundError (core.mjs:245)
    at notFoundValueOrThrow (core.mjs:3324)
    at lookupTokenUsingModuleInjector (core.mjs:3359)
    at getOrCreateInjectable (core.mjs:3461)
    at Module.ɵɵdirectiveInject (core.mjs:14720)
    at NodeInjectorFactory.NgControlStatus_Factory [as factory] (forms.mjs:1343)
    at getNodeInjectable (core.mjs:3556)
    at instantiateAllDirectives (core.mjs:10317)
    at createDirectivesInstances (core.mjs:9666)
    at ɵɵelementStart (core.mjs:14864)

那么为什么即使有值我也会收到这个错误..?

一旦我删除 [(ngModel)]="location.quantity" 我就没有得到任何 error.can 有人指出我如何实现这个

在 Ts 文件中导入

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup ,FormsModule} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { ApiServiceService } from 'src/app/API/api-service.service';
import { ILocationInfo } from 'src/app/Models/Inventory/models';

Answer 1

您似乎还没有导入表单模块。

...
import { FormsModule, ... } from '@angular/forms';

@NgModule({
  imports: [..., FormsModule, ...],
  ...
})
export class AppModule {...}

Angular 来自 ngModel 的数组值 Bin 给出错误

Angular Array Value Bin from ngModel giving error

typescript

angular

angular12