在 angular 中实施 bootstrap 开关时出错 5

Question

我尝试将 Angular switch 实现到 Angular 5 应用程序中，因此我通过 npm 安装软件包。

然后在 app.module 我将 BrowsersAnimation 模块导入为：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ThemeComponent } from "./theme/theme.component";
import { LayoutModule } from "./theme/layouts/layout.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ScriptLoaderService } from "./_services/script-loader.service";
import { ThemeRoutingModule } from "./theme/theme-routing.module";
import { AuthModule } from "./auth/auth.module";
import { ToastrModule } from "ngx-toastr";
import { UsuariosComponent } from "./theme/pages/default/categorias/usuarios/usuarios.component";

import { MatTableModule } from "@angular/material";
import { HttpClientModule } from "@angular/common/http";
import { UsuariosService } from "./_services/usuarios.service";

@NgModule({
  declarations: [ThemeComponent, AppComponent, UsuariosComponent],
  imports: [
    LayoutModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ThemeRoutingModule,
    AuthModule,
    ToastrModule.forRoot(),
    MatTableModule,
    HttpClientModule
  ],
  providers: [ScriptLoaderService, UsuariosService],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后进入usuarios.module.ts我导入bootstrap开关：

  import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { DefaultComponent } from "../../default.component";
import { LayoutModule } from "../../../../layouts/layout.module";
import { DataTablesModule } from "angular-datatables";
import { BootstrapSwitchModule } from "angular2-bootstrap-switch";
// import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatPaginatorModule,
  MatSortModule,
  MatPaginatorIntl
} from "@angular/material";
// import { MatIconModule } from "@angular/material";
import { HttpClientModule } from "@angular/common/http";

import { UsuariosComponent } from "./usuarios.component";
import { UsuariosService } from "../../../../../_services/usuarios.service";

import { getSpanishPaginatorIntl } from "../lenguaje-paginador";

// This Module's Components
const routes: Routes = [
  {
    path: "",
    component: DefaultComponent,
    children: [
      {
        path: "",
        component: UsuariosComponent
      }
    ]
  }
];

@NgModule({
  exports: [
    // Material
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatSortModule
  ],

  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    LayoutModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule,
    HttpClientModule,
    BootstrapSwitchModule.forRoot()
  ],
  providers: [
    UsuariosService,
    { provide: MatPaginatorIntl, useValue: getSpanishPaginatorIntl() }
  ],
  declarations: [UsuariosComponent]
})
export class UsuariosModule {}

在 usuarios.component 中，我将 html 模板称为：

 import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
import { User } from "../../../../../_models/user.model";
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";
import { BootstrapSwitchModule } from "angular2-bootstrap-switch";

// import { MatIconRegistry } from "@angular/material";

@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;



  // private loadingSubject = new BehaviorSubject<boolean>(false);
  // public loading$ = this.loadingSubject.asObservable();

  // dataSource = new UserDataSource(this.UsuariosService);
  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];
  // private lessonsSubject = new BehaviorSubject<Lesson[]>([]);

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {

    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
  }

  ngAfterViewInit() {
    this._script.loadScripts("usuarios", [
      "assets/app/base/usuarios/get-usuarios.js"
    ]);
  }
}

如您所见，我使用了 usuarios.component.html，因此在该文件中我将开关设置为：

<switch [status]="value" [onText]="si" [offText]="no" [onColor]="onColor" [offColor]="offColor" [size]="size" [disabled]="disabled"
                (statusChange)="onFlagChange($event)"></switch>

但是 returns 所有标识符都没有定义例如：

Identifier 'yes' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

Image

有人知道我做错了什么吗？

Answer 1

你需要在组件中定义那些属性！否则无法在模板上使用。

@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})

export class UsuariosComponent {
    public yes: boolean = false;
    public no: boolean = false;
    public green: string = 'green';
    public gray: string = 'gray';
    public disabled: boolean = false;
}

在 angular 中实施 bootstrap 开关时出错 5

Error implementing bootstrap switch in angular 5

angular-bootstrap

bootstrap-switch

angular