标签: angular5

在开发模式下运行良好.

错误:

Uncaught TypeError: (void 0) is not a function
    at main.aff8cee52d3bd3903f34.bundle.js:1
    at Object.cDNt (main.aff8cee52d3bd3903f34.bundle.js:1)
    at n (inline.0da255c51a7d5ae908f0.bundle.js:formatted:10)
    at Object.0 (main.aff8cee52d3bd3903f34.bundle.js:1)
    at n (inline.0da255c51a7d5ae908f0.bundle.js:formatted:10)
    at window.webpackJsonp (inline.0da255c51a7d5ae908f0.bundle.js:formatted:25)
    at main.aff8cee52d3bd3903f34.bundle.js:1

发生错误的bundle.js代码:

webpackJsonp([1], {
    ....
    wi = new yi.l("UseV4Plurals"), Ei = function() {}, Mi = function(e) {
        function t(t, n) {
            var r = e.call(this) || this;
            return r.locale = t,
                   r.deprecatedPluralFn = n,
                   r
        }
        return (void 0)(t, e),   <-------------- Error 

我的package.json文件:

{
  "name": "angular-front-end",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": { …

我有以下组件结构

• 项目
  • 编辑项目
  • 子ressource1
  • 子ressource2
  • 子ressource3

所以我的路由看起来像这样:

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent},
      { path: 'subres1', component: Subres1Component},
      { path: 'subres2', component: Subres2Component},
      { path: 'subres3', component: Subres3Component},
      { path: 'subres4', component: Subres4Component}
    ]
  }
]

{
    path: 'project/:projectId', 
    component: ProjectDetailComponent,
    children: childroutes,
    resolve: { project: ProjectResolver} /** resolve Project from ProjectService **/
}

正如您所看到的,我从服务中解析了Projectdata,并可以通过ProjectDetailComponent访问它们

this.route.snapshot.data

所以现在的问题是,如何将"EditProjectComponent"中解析的数据传递给它的所有childroutes组件？

我现在可以执行以下操作来解决子组件中的项目数据:

const childroutes = [
  {
    path: '',
    children: [
      { path: 'edit', component: EditProjectComponent,resolve: …

我尝试在更新为angular 5之后将service worker添加到我的项目中并遇到一些问题.我将导入添加到app.module.ts:

import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
...
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],

执行$ ng set apps.0.serviceWorker=true以允许项目中的服务工作者

生成配置:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "/",
        "/main",
        "/login",
        "/select-content"
      ],
      "cacheConfig": {
        "strategy": "performance", …

我在角度2/4中使用了表单构建器,但现在我在角度6中使用它.我已经看到了这个问题(不能绑定到'formGroup',因为它不是'form'的已知属性)但是它是针对角度2.我对角度4完全相同,但我得到了这个错误.请帮忙:我的代码是:

app.module.ts :(我已导出FormsModule和ReactiveFormsModule):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ], …

我在使用角度为5的httpinterceptor时遇到了奇怪的问题.我无法在Chrome中获得错误响应和错误状态代码,但是能够进入下面的IE是我的HttpInterceptor代码.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } 
from '@angular/common/http';
import { finalize, tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
const startTime = Date.now();
let status: string;

return next.handle(req).pipe(
    tap(
      event => {
        status = '';
        if (event instanceof HttpResponse) {
          status = 'succeeded';
        }
      },
      error => {
        if(error instanceof HttpErrorResponse)  {
          console.log(error.error.message) 
          // Above message is printing in IE but no in chorme. …

我有mat-table中实现mat-sort的问题,当源是从观察者流创建的.

只需通过以下文档实现它:

ngAfterViewInit() {
        this.dataSource.sort = this.sort;
    }

工作不正常 - 总是只在我的桌子上排序5行.

我想,我的问题是正确使用它与rxjs连接.

不幸的是,在检查了另一个问题/文档后,我找不到任何想法.

我从两个观察者流生成数据源.我还使用了BehaviourSubject(用于初始值),combineLatest和switch map.表格创建得很好,工作得很好.

此外,当我添加过滤器(根据角度材料设计文档)工作正常.但是mat-sort ...不是(只有5个第一行).

ngOnInit() {
        this.filters = itemFilters;
        this.idSubject = new BehaviorSubject(this.filters[0]);
        Observable.combineLatest(this.name, this.selectedFilter)
            .do(_ => this.items = null)
            .switchMap(([name, filterIndex]: [Name | null, number]) => {
                const item = this.filters[filterIndex];
                this.namesSubject.next(item.display);
                return this.itemService.getItems(name);
            })
            .subscribe(this.setItems.bind(this), this.setError.bind(this));
    }

我也尝试使用Observable.zip - 但我认为这也不是我的情况.任何想法/建议都将非常有价值.

我想,我应该将排序方法订阅到可观察流.我有同样的问题与分页.有时工作,有时不工作.

要求:我需要为data-binding属性编写单元测试HTML element.

这是代码:

<kendo-grid
            [kendoGridBinding]="gridData"
            [resizable]="true"
            style="height: 300px">
            <kendo-grid-column
                field="UnitPrice"
                title="Unit Price"
                [width]="180"
                filter="numeric"
                format="{0:c}">
            </kendo-grid-column>
</kendo-grid> 

我需要为resizable属性值编写单元测试.

到目前为止我尝试了什么:

  it('kendo-grid element should contain resizable attribute with "true" value', () => {
    const element = fixture.debugElement.nativeElement.querySelector('kendo-grid');
    expect(element.resizable).toBeTruthy();
  });

在运行Karma测试运行器时失败了.

任何帮助都会非常值得一提.

我正在使用div开发一个n级嵌套表的脚本.

因此,有5到6列有n行数,每个第一列都必须展开/折叠按钮,点击后我调用API,它给出了与所选行过滤器相对应的数据.

以前当我使用核心JavaScript和jQuery时,我使用find文档选择器的方法来识别展开/折叠按钮的父级,并在仅使用innerHTML或appendjQuery方法之后推送动态创建的HTML之后的特定div

我对角度有点新意,并没有多少工作.请帮我解决这个问题.

splitOpt 是一个对象数组,我将根据该数组拆分报告数据.

this.splitOpt = [
    {
        id: "country",
        label: "Country"
    },
    {
        id:"os".
        label:"Operating System"
    },
    {
        id:"osv".
        label:"Operating System Version"
    }
]

获取报告的功能

getReport() {

    // apiFilters are array of object having some values to filter report data  
    var apiFilters: any = [{}];
    for (var i = 0; i < this.sFilters.length; i++) {

        if (this.sFilters[i][0].values.length > 0) {
            var k;
            k = this.sFilters[i][0].id
            apiFilters[0][k] = this.sFilters[i][0].values;
        } …

我试图得到一个mat-slide-toggle但不幸的当前值我会得到一个错误:

Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle'.

我在我的组件的html部分中使用这样的切换:

 <mat-slide-toggle color="primary" [(ngModel)]="showInnerView">
      Default Slide Toggle
 </mat-slide-toggle>

我的组件中的相应属性:

showInnerView: boolean = false;

我做错了什么？

文件的mat-slide-toggle

官方例子的mat-slide-toggle一起[(ngModel)]

使用版本:Angular:5.2.4,Angular材料:5.2.0

我正在开发angular 5应用程序,我需要在模板中的样式标记中应用动态css.我尝试了一些解决方案,但它们没有用.

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

当我在浏览器中检查custom_css类时,它显示的样式

.custom_css{
   color: {{customCss.color}};
}

任何帮助表示赞赏.