Question

我尝试在Angular 5 Application中实现Angular switch，所以我通过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>

但它返回的所有标识符都没有定义，例如：

标识符＆＃39;是＆＃39;没有定义。组件声明，模板变量声明和元素引用不包含这样的构件

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;
}

在角度5中实现自举开关时出错

1 个答案: