Question

我想使用Angular ng-toggle组件。

我正在使用延迟加载，即将NgToggleModule导入到我的延迟加载模块中。如果不使用[（ngModule）] =“ cat.enable”，组件将正确呈现。

dispomap.module.ts

<style>
   ion-content{
    background:black;
  }
</style>

dispomap-settings.component.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DispomapComponent } from './dispomap.component';
import { DispomapSettingsComponent } from './dispomap-settings/dispomap-settings.component';
import { Routes, RouterModule } from '@angular/router';
import { DispmapService } from './Service/dispmap.service';
import { NgToggleModule } from '@nth-cloud/ng-toggle';

const routes: Routes = [
...
  {
      path: 'settings',
      data: {
          title: 'Settings'
      },
      component: DispomapSettingsComponent,
  }
];

@NgModule({
  declarations: [DispomapComponent, DispomapSettingsComponent],
  imports: [
    CommonModule,
    NgToggleModule,
    RouterModule.forChild(routes),
  ],
  providers: [ DispmapService ]
})
export class DispomapModule { }

dispomap-settings.component.html

import { Component, OnInit } from '@angular/core';
import { DispmapService } from '../Service/dispmap.service';
import { IDispoMapCategoryInfo } from '../Models/IDispoMapCategoryInfo';

@Component({
  selector: 'app-dispomap-settings',
  templateUrl: './dispomap-settings.component.html',
  styleUrls: ['./dispomap-settings.component.scss']
})
export class DispomapSettingsComponent implements OnInit {

  CategoryInfos: IDispoMapCategoryInfo[];
  constructor(private dispomapService: DispmapService) { }

  ngOnInit() {
    this.dispomapService.GetCategories().subscribe(ci => {
      this.CategoryInfos = ci;
    });
  }

}

Google Chrome控制台错误：

<div>
  <div class="row" *ngFor="let cat of CategoryInfos">
    <div class="col-2 col-md-1">
        <ng-toggle onColor="primary" offColor="secondary" [(ngModel)]="cat.enabled"></ng-toggle>
      </div>
    <div class="col-6 col-md-4">{{cat.label}}</div>
    <div class="col-2 col-md-1">{{cat.order}}</div>
    <div class="col-2 col-md-1">{{cat.trucks}}</div>
  </div>
</div>

Answer 1

这是因为FormsModule不是您模块的一部分。

为了在组件中使用双向数据绑定，您需要将FormsModule导入模块。

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
//.. other imports

@NgModule({
  imports: [
    FormsModule,
    // other imports    
  ]

无法绑定到“ ngModel”，因为它不是“ ng-toggle”的已知属性

1 个答案: