代码之家 › 专栏 › 技术社区 › CrazyCoder

ngModel的角度数组值Bin给出错误

angular12 typescript angular

0

CrazyCoder · 技术社区 · 4 年前

我正在尝试使用*ng将来自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。这是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;

}

阵列将使用角分解器填充,因此当存在形式负载值时

构造函数代码

  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" 我没有任何错误。有人能告诉我如何做到这一点吗

在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';

0 回复 | 直到 4 年前

1

Muhammed Misir 4 年前

看起来您还没有导入表单模块。

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

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