标签: angular5

我是棱角分明的新人.我使用vs2015和最新的角度包创建了一个web应用程序.当我尝试从按钮单击事件上的组件调用我的服务时,我在浏览器控制台窗口中收到以下错误.

错误: -

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[ViewCountService]: 
  StaticInjectorError[ViewCountService]: 
    NullInjectorError: No provider for ViewCountService!
Error: StaticInjectorError[ViewCountService]: 
  StaticInjectorError[ViewCountService]: 
    NullInjectorError: No provider for ViewCountService!
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get (refs.js:1037)
    at resolveDep (provider.js:455)
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get …

我尝试了以下尝试单击选择下拉列表中的选项,但没有任何工作.

selectEl = fixture.debugElement.query(By.css('#dropdown'));
selectEl.nativeElement.options[3].nativeElement.dispatchEvent(new Event('click'));
selectEl.queryAll(By.css('option'))[3].nativeElement.click();
selectEl.nativeElement.options[3].nativeElement.click();

在每次运行fixture.detectChanges();后运行更改检测但是当我去检查元素值时它没有改变. expect(selectEl.nativeElement.options[selectEl.nativeElement.selectedIndex].textContent).toBe('name2');

我错过了一些简单的工作吗？

每当我使用我的角度项目对index.html进行任何更改时，Serviceworker都不会更新，并且始终在index.html上提供旧的缓存版本。我该如何解决（服务器端和浏览器也没有缓存）

这是我的ngsw-config文件

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/manifest.json"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

我对请求的响应标头：

任何想法如何解决这个问题？

谢谢

正如您可能从角度材料文档中了解到的那样,mat-expansion-panel将@Output命名为"opened",这是在打开手风琴项目时发出的.我想抓住那个打开的事件并确定哪个面板被打开了.但是这个简单的代码(下面)总是只返回undefined.我做错了什么？此输出是仅发出未定义还是我错过了什么？材料文档没有说明这种情况.

component.html

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}

就像标题所说,我继续得到这个奇怪的错误.我也尝试使用npm uninstall xml2js卸载它,但直到现在还没有任何工作.

我只是按照演示来展示一个简单的数据表.这是我的代码:

columns = [
    {name: 'ID', prop: 'id'},
    {name: 'Street Address', prop: 'address.street'},
    {name: 'Suburb', prop: 'address.suburb'},
    {name: 'State', prop: 'address.state'},
    {name: 'Manager Name', prop: 'manager.name'},
    {name: 'Manager Company', prop: 'manager.company'},
  ];

<ngx-datatable #table
  class = 'material striped'
  [columns] = "columns"
  [rows] = "rows | async"
  [footerHeight] = "25" >
</ngx-datatable>

排序确实有效,但是当我点击一列来对记录进行排序时,我也会收到此错误:

我从Firestore获取了Observable行.

我正在尝试在我的angular 5应用程序中进行动态导入。根据这个github问题，评论说使用module: esnext应该可以使其工作。这是我的配置

"compilerOptions": {
  "outDir": "./dist/out-tsc",
  "noEmitOnError": true,
  "target": "es2016",
  "module": "esnext",
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "sourceMap": true,
  "moduleResolution": "node",
  "declaration": false,
  "lib": [
    "es2016",
    "dom"
  ]
}

注：由于没有es2016在lib中，因为我使用的给我的错误.find()和.includes对磁盘阵列的在我的代码。

编译时出现此错误

error TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.

不知道为什么我仍然有针对ECMA2015模块的原因module: esnext。

我有什么方法可以改变颜色属性

mat-slide-toggle 

或者可以建议我任何幻灯片切换到角度5应用程序,如材料幻灯片切换.

如何覆盖css？...

我正在使用font-awesome npm包(这是Font Awesome 4.7版本),但我想升级到Font Awesome 5.我已经安装了以下软件包:

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

我正在使用这样的图标:

<i class="fa fa-plus"></i>

在新版本中,我尝试使用这样的图标:

<i class="fas fa-sign-out-alt fa-2x"></i>

但这不起作用.我尝试添加这样的图标:

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

在我的app.module.ts中,它正在工作,但我不想逐个导入每个图标.有没有办法像我以前的版本一样使用它们？有没有办法不逐一导入它们？

谢谢

我正在尝试将我的项目从angular 5更新到angular7。为此，首先在本地更新@ angular / cli，然后在本地安装@ angular / cli，然后更新ng模块和其他相关命令。

现在，我检查ng --version，它显示的是我的角度7，但是我的项目没有运行，总是抛出以下错误：

Below is my script in package.json file:

"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --port=9000 -- 
   content-base wwwroot/",
   "build": "cross-env NODE_ENV=development webpack --progress",
   "prod": "cross-env NODE_ENV=production webpack  --progress"
 }