Ошибка при реализации переключателя начальной загрузки в угловых 5

Question

Я пытаюсь внедрить Угловой переключатель в приложение 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 я импортирую переключатель начальной загрузки:

  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>

, но он возвращает все идентификаторы, которые не определены, например:

Идентификатор 'yes' не определен.Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена

Изображение

Кто-то знает, что я делаю неправильно?

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