Question

我正在按照https://www.npmjs.com/package/ngx-spinner上的说明在应用程序中实现微调器，但显然我做错了事。

这是我的打字稿模块。一切工作正常，但是即使在ngOnInit中显示并将其隐藏在getFacilities的回调中，我也看不到任何微调器。（我知道这些方法正在执行，因为我正在将数据显示到页面上。）

Caused by: java.lang.NumberFormatException: For input string: "18sp"

一旦我将以下内容添加到html模板中，所有的地狱便会崩溃。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxSpinnerService } from "ngx-spinner";
import { Portfolio} from '../models/Portfolio';
import { Facility } from '../models/Facility';
import 'rxjs/add/operator/map';


@Component({
    selector: 'app-member-component',
    templateUrl: './member.component.html'
})
export class MemberComponent {

    constructor(private http: HttpClient, private spinner: NgxSpinnerService ) { }

    public SelectedPortfolio: Portfolio = new Portfolio;
    public Portfolios: Portfolio[] = [] ;

    public SelectedFacility: Facility = new Facility;
    public Facilities: Facility[] = [];

    public UILock: boolean;

    ngOnInit() {

        // call the method on initial load of page to bind dropdown   

        this.spinner.show();
        this.UILock = true;

        this.SelectedPortfolio.name = "Select Portfolio";
        this.SelectedPortfolio.id = 0;

        this.SelectedFacility.name = "<No Portfolio Selected>";
        this.SelectedFacility.id = 0;

        this.getPortfolios();
    }

    public selectPortfolio(portfolio: Portfolio) {

        this.SelectedPortfolio = portfolio;

        this.getFacilities();
    }

    public selectFacility(facility: Facility) {

        this.SelectedFacility = facility;
    }

    private getPortfolios() {

        this.UILock = true;

        this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio').subscribe((portfolios: Portfolio[]): void =>
          {
            this.Portfolios = portfolios;
            this.selectPortfolio(portfolios[0]);
          }
        );
    }

    private getFacilities() {

        this.http.get<Portfolio[]>('https://localhost:44319/api/portfolio/' + this.SelectedPortfolio.id).subscribe((facilities: Facility[]): void =>
            {
              this.Facilities = facilities;
              this.selectFacility(facilities[0]);
              this.UILock = false;
              this.spinner.hide();
            }
        );
    }
}

该页面无法加载，我看到以下异常：

<ngx-spinner bdColor="rgba(51,51,51,0.8)"
             size="medium"
             color="#fff"
             type="ball-scale-multiple">
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

这是我的app.module.ts：

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[NgxSpinnerComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[NgxSpinnerComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.get (core.js:1354)
    at resolveToken (core.js:1681)
    at tryResolveToken (core.js:1607)
    at StaticInjector.get (core.js:1470)
    at resolveToken (core.js:1681)
    at tryResolveToken (core.js:1607)
    at StaticInjector.get (core.js:1470)
    at resolveNgModuleDep (core.js:23104)
    at NgModuleRef_.get (core.js:24192)
    at resolveDep (core.js:24722)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30873)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

谢谢您的建议！

也许我的package.json相关吗？

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { NgxSpinnerModule } from "ngx-spinner";

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { MemberComponent } from './member/member.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        MemberComponent,
    ],
    imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        HttpClientModule,
        FormsModule,
        ApiAuthorizationModule,
        NgxSpinnerModule,
        RouterModule.forRoot([
            { path: '', component: HomeComponent, pathMatch: 'full' },
            { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
        ])
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您缺少@ angular / common中的commonmodule

从'@ angular / common'导入{CommonModule};

Answer 2

您可以像这样处理。 Example

 showSpinner() {
    this.spinner.show();
    setTimeout(() => {
        /** spinner ends after 5 seconds */
        this.spinner.hide();
    }, 5000);
  }

Answer 3

问题是，我在项目中有两个 node_modules 文件夹。一个位于正确的位置，位于 ClientApp 中（Angular应用程序所在的位置），另一个位于Web应用程序的根目录（错误！）。显然有冲突。

我现在了解到，在构建这样的应用程序时，实际上是在构建两个应用程序–一个在服务器上（使用C＃），另一个在客户端（Angular / Typescript）上。 Visual Studio提供了一个统一的编辑器环境，在该环境中我们可以同时在两个应用程序上工作，但它仍然是两个单独的应用程序。最初，在我真正知道自己在做什么之前，我通过Visual Studio控制台窗口安装了Angular模块，但我没有意识到在安装任何文件夹之前手动设置文件夹位置（ cd ClientApp ）很重要。包，否则将最终放在错误的位置。这是我所做的清理工作：

从项目根目录摆脱了流氓 package.json ， package-lock.json ， angular.json 。
卸载 Dependencies / NPM
从项目根目录中删除 node_modules 文件夹
运行 ClientApp 文件夹中的 npm更新。

现在一切正常！我什至不必更改一行代码。

尝试实现Spinner时发生异常

3 个答案: