标签: angular5

这两者之间有什么区别:

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li>

VS

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li>

在组件类中:

shouldDisableField(): boolean{
  return this.condition1 && this.condition2 && this.condition3;
}

我想从组件加载模态.在Angular Material文档中写入以在entryComponents中添加模态组件:

这个 :

@NgModule({
  imports: [
    CommonModule,
    AidesRoutingModule
  ],
  declarations: [TypesAidesComponent, TypesAidesAjouterComponent],
  entryComponents : [TypesAidesAjouterComponent]
})
export class AidesModule {

}

在TypesAidesComponent中,我想要使用TypesAidesAjouterComponent打开对话框:

let dialog = this.dialog.open(TypesAidesAjouterComponent);
    dialog.afterClosed().subscribe(res => {
      if(res){
        this.collection.addItem(res);
      }
    });

我在一个组件延迟加载:

{
        path: 'types-aides',
        loadChildren: 'app/modules/aides/aides.module#AidesModule'
    },

但我有这个错误:

错误:找不到TypesAidesAjouterComponent的组件工厂.你有没有把它添加到@ NgModule.entryComponents？

我找到了一个解决方案,它是移动删除LazyLoading,但我的应用程序很大,不可能.

你有什么建议吗 ？

我对Angular的世界很新.CommonModulevs 之间有什么区别BrowserModule？为什么一个应该优先于另一个？

我使用角度材料datepicker指令,我有几个问题.

1.当我打开日期选择器对话框并选择任何日期时,日期显示在输入文本框中,但我想在输入文本框中发生任何更改时调用函数.

现在,如果我在输入文本框中手动输入任何值,我使用(输入)指令触发函数,它正常工作,如代码所示.我希望在使用日期选择器对话框更改日期时触发相同的功能.

2.当从日期选择器对话框中选择时,我还想将日期格式从mm/dd/yyyy更改为dd/mm/yyyy.这里,mm/dd/yyyy在此指令中默认设置.

<input matInput [matDatepicker]="organizationValue" formControlName="organizationValue" (input)="orgValueChange(i)">
<mat-datepicker-toggle matSuffix [for]="organizationValue"></mat-datepicker-toggle>                 
<mat-datepicker #organizationValue></mat-datepicker>

我正在使用Angular 5中的Material Component处理一个项目.我确实更新了我的Visual代码,但我不知道发生了什么.我正面临一个问题"类型'ElementRef'不是通用的." 从早上起我一直坚持这个问题.

这一行出错

_inputElement: ElementRef<HTMLInputElement>;
constructor(toggleGroup: MatButtonToggleGroup, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLInputElement>, _focusMonitor: FocusMonitor);

Firebase提供商

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

@Injectable() export class FirebaseProvider {
  constructor(public afd: AngularFireDatabase) { }

  getFoodItems() {
    return this.afd.list("/foodItems");
  }

  addFood(foodName) {
    this.afd.list("/foodItems").push(foodName);
  }

  removeFood(id) {
    this.afd.list("/foodItems").remove(id);
  }
}

我在这里使用Firebase提供程序(预定义方法)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { StepperPage } from '../stepper/stepper';
import { AboutUsPage } from '../about-us/about-us';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { FirebaseListObservable } from …

一旦我将我的应用程序构建到生产到Firebase托管中,我就会遇到一些用户的错误:

@ firebase/database:FIREBASE警告:用户回调抛出了异常.TypeError:无法读取未定义的属性"myID"

截图

在我的代码中,在任何地方都没有变量"myID" .一切都可以很好地用于开发,但是一旦它被构建并在生产中,错误就会出现在某些用户身上.

这是我的packages.json版本:

"dependencies": {
"@angular-devkit/core": "0.0.29",
"@angular-devkit/schematics": "^0.6.0",
"@angular/animations": "^5.2.10",
"@angular/cli": "^1.7.4",
"@angular/common": "^5.2.10",
"@angular/compiler": "^5.2.10",
"@angular/core": "^5.2.10",
"@angular/forms": "^5.2.10",
"@angular/http": "^5.2.10",
"@angular/platform-browser": "^5.2.10",
"@angular/platform-browser-dynamic": "^5.2.10",
"@angular/router": "^5.2.10",
"@ng-bootstrap/ng-bootstrap": "^1.1.2",
"@schematics/package-update": "^0.6.0",
"ajv": "^6.0.0",
"angular2-recaptcha": "^0.6.0",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.0",
"core-js": "^2.5.5",
"firebase": "^4.13.1",
"firebase-admin": "^5.10.0",
"firebase-functions": "^0.8.2",
"ng2-validation": "^4.2.0",
"rxjs": "^5.5.10",
"zone.js": "^0.8.26"
 },
"devDependencies": {
"@angular/compiler-cli": "^5.2.10",
"@angular/language-service": "^5.2.10",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.106",
"codelyzer": "^4.3.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0", …

在开发模式下运行良好.

错误:

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": { …

我尝试在更新为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", …

我有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 - 但我认为这也不是我的情况.任何想法/建议都将非常有价值.

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