如何正确实现kendo-switch角度分量？ （它没有正确呈现“已检查”状态）

Question

我有一个使用CLI的新Angular 4项目，并且有其他Kendo UI组件正常工作。使用kendo-switch时，当checked = true时，开关不能正确切换。它不是从左（从）向右（在）上投掷，而是将切换颜色转换为主题颜色（橙色=默认值）。

This plunker shows the toggle working fine，但my code in this github repo没有。

我已经包含节点模块以支持此组件，但它无法正确呈现。我也在使用SASS来加载默认的Kendo UI主题。

其他组件有效，但kendo-switch无法正确呈现。

package.json

"dependencies": {
  "@angular/animations": "^4.4.6",
  "@angular/common": "^4.4.6",
  "@angular/compiler": "^4.4.6",
  "@angular/core": "^4.4.6",
  "@angular/forms": "^4.04.6",
  "@angular/http": "^4.4.6",
  "@angular/platform-browser": "^4.4.6",
  "@angular/platform-browser-dynamic": "^4.4.6",
  "@angular/router": "^4.4.6",
  "@progress/kendo-angular-buttons": "^2.0.0",
  "@progress/kendo-angular-dateinputs": "^1.3.1",
  "@progress/kendo-angular-dropdowns": "^1.2.2",
  "@progress/kendo-angular-inputs": "^1.3.2",   // <-- npm install
  "@progress/kendo-angular-intl": "^1.2.2",
  "@progress/kendo-angular-l10n": "^1.0.4",
  "@progress/kendo-angular-label": "^1.0.3",
  "@progress/kendo-theme-default": "^2.43.2",
  "bootstrap": "^4.0.0-beta.2",
  "core-js": "^2.4.1",
  "jquery": "^3.2.1",
  "popper.js": "^1.12.6",
  "rxjs": "^5.5.2",
  "zone.js": "^0.8.14"
},
"devDependencies": {
  "@angular/cli": "1.5.0",
  "@angular/compiler-cli": "^4.4.6",
  "@angular/language-service": "^4.4.6",
  "@types/jasmine": "~2.5.53",
  "@types/jasminewd2": "~2.0.2",
  "@types/node": "~6.0.60",
  "codelyzer": "~3.2.0",
  "jasmine-core": "~2.6.2",
  "jasmine-spec-reporter": "~4.1.0",
  "karma": "~1.7.0",
  "karma-chrome-launcher": "~2.1.1",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "node-sass": "^4.6.0",
  "protractor": "~5.1.2",
  "ts-node": "~3.2.0",
  "tslint": "~5.7.0",
  "typescript": "^2.3.4"

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';   // <-- import the module
import { LabelModule } from '@progress/kendo-angular-label';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,

    ButtonsModule,
    DateInputsModule,
    DropDownsModule,
    InputsModule,   // <-- import module
    LabelModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<form class="k-form">

  <!-- kendo-datepicker control works -->

  <label class="k-form-field">
    <span>Birth Date</span>
    <kendo-datepicker></kendo-datepicker>
  </label>

  <!-- kendo-switch controls (NOT CORRECTLY RENDERING WHEN "CHECKED") -->

  <label class="k-form-field">
    <span>Newsletter Signup</span>
    <
      [(ngModel)]="newsletter"
      [onLabel]="'Yes'"
      [offLabel]="'No'"
      [disabled]="false"
      >
    </kendo-switch>
  </label>

  <!-- kendo-autocomplete control works -->

  <label class="k-form-field">
    <span>City</span>
    <kendo-autocomplete
          [data]="items"
          [placeholder]="'e.g. Toronto'">
      </kendo-autocomplete>
  </label>

</form>

Answer 1

更改

 <label class="k-form-field">
    <span>Newsletter Signup</span>
      <
       [(ngModel)]="newsletter"
       [onLabel]="'Yes'"
       [offLabel]="'No'"
       [disabled]="false"
       >
      </kendo-switch>
 </label>

到

 <label class="k-form-field">
    <span>Newsletter Signup</span>
    <kendo-switch
       [(ngModel)]="newsletter"
       [onLabel]="'Yes'"
       [offLabel]="'No'"
       [disabled]="false"
      >
    </kendo-switch>
  </label>

这应该有效

U在大括号处错过了剑道开关