小编Ale*_*dro的帖子

将Angular Cli升级到1.3.1我现在有一些警告

WARNING in Circular dependency detected: src\app\work-sessions\work-session-list\work-session-list.routing.ts
-> src\app\work-sessions\work-session-list\index.ts -> src\app\work
-sessions\work-session-list\work-session-list.routing.ts

每个类都有这样的结构:

工作会话list.routing.ts

import { Route } from '@angular/router';
import { WorkSessionListComponent } from './index';

export const WorkSessionRoutes: Route[] = [
  {
    path: '',
    component: WorkSessionListComponent
  },
];

Index.ts

export * from './work-session-list.component';
export * from './work-session-list.routing';

工作会议,list.module.ts

import { WorkSessionListComponent } from './work-session-list.component';
import { WorkSessionRoutes } from './work-session-list.routing';
import { DataTableModule } from 'primeng/primeng';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; …

在我的Angular 4应用程序中,我有一个必须返回一个observable的方法,这个方法有3个条件,第一个和第二个条件进行get调用,但是第三个条件不能做任何事情,在这种情况下我也必须返回一个observable因为这个方法是.flatmap运算符的第一部分,所以为了链接flatmap的第二部分,我需要从第一部分开始观察.

我尝试:return new Observable<void>();但我有这个错误:

错误TypeError:无法读取undefined的属性'subscribe'

这是必须调用服务来加载数据的初始方法.

loadModelData() {
      this.customerService.getModelDetail(this.code)
        .subscribe(response => {
          this.selected = response.body as Customer;
        });
    }
  }

这是必须链接2个调用的服务方法.

getModelDetail(code) {

    const params = new HttpParams().set('projection', 'withBalance');

    return this.endPointUrlService.loadMaps(this.entityLink)

      .flatMap((res) => {
        return this.http.get(this.endPointUrlService.cutLinks(
          this.endPointUrlService.map.get('customers')) + '/' + code, {observe: 'response', params: params})
          .map((response) => <any>response);
      })
  }

这是来自名为endPointUrlService的支持服务的方法,checkIfMapIsReady()是必须在第三种情况下返回void observable的方法

  loadMaps(entityLink: EntityLink[]): Observable<void> {
    console.log(entityLink);

    for (const i in entityLink) {
      if (entityLink.hasOwnProperty(i)) {
      return this.checkIfMapIsReady(entityLink[i].name, entityLink[i].searchMap, entityLink[i].endPoints[0])
      }
    }
  }


  public checkIfMapIsReady(modelName: …

在我的角度5应用程序中,我有以下错误:

Http错误:{"description":"'URLSearchParams'nonèdefinito","number": - 2146823279,"stack":"ReferenceError:'URLSearchParams'nonèdefinito

IE11不支持URLSearchParams,所以是否有任何类型的导入可以polyfills.ts使它工作？

在我的角度5应用程序中,我有一些matAutocomplete,但我想强制选择一些建议,所以我遵循这种方法: stackblitz 但由于某种原因,在一个案例中我有一个问题:

无法在CustomerDetailComponent.ngAfterViewInit的CustomerDetailComponent.countryClosingActions(customer-detail.component.ts:199)中读取未定义的属性'panelClosingActions'

我有多个matAutocomplete,但只有这个有问题.(关于这个方法的信息在这里是github

HTML

<mat-form-field>
    <input matInput #nation placeholder="{{'customer.detail.labels.country'
      | translate }}" required [matAutocomplete]="tdAuto" name="country"  
      #count="ngModel" [(ngModel)]="selected.country"
      (ngModelChange)="searchCountry($event)">
        <mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn">
          <mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country">
             <div class="row">
               <img src="assets/img/flags24/{{country.alpha2Code | lowercase}}.png" />
                  <span>{{country.name}} ({{country.alpha2Code}})</span>
             </div>
         </mat-option>
        </mat-autocomplete>
    </mat-form-field>

零件

@ViewChild('nation', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
  subscription: Subscription;


ngAfterViewInit() {
    this.countryClosingActions();
  }

  private countryClosingActions(): void {
    if (this.subscription && !this.subscription.closed) {
      this.subscription.unsubscribe();
    }

    this.subscription = this.trigger.panelClosingActions
      .subscribe(e => {
        console.log('closing')
        if (!e || !e.source) …

在我的angular 4项目中，我需要在bootstrap-modal内部关注一些领域

这是模态：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="material-icons">clear</i>
    </button>
    <h4 class="modal-title">{{'checkpoint.table.dialog.title' | translate }}</h4>
   </div>
   <form #modelForm="ngForm">
  <div class="modal-body">
    <div class="row">
        <div class="col-md-8">
            <div class="form-group label-floating">

                <label class="control-label">{{'checkpoint.table.dialog.labels.name' | translate }}
                <span class="star">*</span>
                </label>
                <input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" #focus />

            </div>
        </div>
    </div>

我用普通按钮打开对话框

<button type="button" class="btn btn-info btn-lg" 
data-toggle="modal" data-target="#myModal">Open Modal</button>

我已经尝试过一些解决方案，例如：

@ViewChild('focus') inputElement: ElementRef;

并在打开模式时在按钮中：

this.inputElement.nativeElement.focus();

要么：

$('#myModal').on('shown.bs.modal', function () …

在我的angular 4项目中，我正在使用一些matDatepicker，如果我从datepicker中选择一个日期，则它可以正常工作，但是如果我在输入字段中手动输入日期，则会在错误的Locale中看到该日期。

我正在遵循：github，但是我选择日期时只能看到正确的语言环境，而写日期则看不到。语言环境是否可能被覆盖？

这是日期适配器：

    /**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {Inject, Injectable, Optional} from '@angular/core';
import {DateAdapter, MAT_DATE_LOCALE, MatDateFormats} from '@angular/material';
// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally …

在我的 angular 5 项目中，我有一个 PrimeNG 表，我想从 url 加载分页参数，例如： http://.... tickets?first=10&sortField=exitDate&sortOrder=1

问题是当我刷新页面时，我没有看到正确的 sortIcon 和正确的分页器。

在component.ts onInit 我从一个数组中的 url 加载所有参数：

this.route.queryParams.subscribe((params: Params) => {
    for (const param in params) {
        filters.push({ property: param, value: params[param] })
       }
     this.preloadFilterFields(filters)
    })

然后我把参数放在事件中

  preloadFilterFields(filters: Filter[]) {
    for (const filter of filters) {
      if (filter.property === 'first') {
        this.event.first = filter.value;
      } else if (filter.property === 'sortField') {
        this.event.sortField = filter.value;
      } else if (filter.property === 'sortOrder') {
        this.event.sortOrder = filter.value;
      }
    }
  }

这是 …

我正在使用角度6的primeng验证码,我有一个问题.当我尝试直接加载具有验证码确认的页面时出现此错误:

ERROR TypeError:window.grecaptcha.render不是Captcha.push ../ node_modules/primeng/components/captcha/captcha.js.Captcha.init(captcha.js:42)中Captcha.push ../ node_modules /的函数primeng/components/captcha/captcha.js.Captcha.ngAfterViewInit(captcha.js:32)

我只在index.html初始化了验证码:

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

但是如果我从另一个页面路由到此页面,它就可以工作.

任何想法如何解决？

l如何将焦点设置到formArray中的特定字段？

这是数组形式：

    this.productForm = this.formBuilder.array([
     this.formBuilder.group({
     code: [null],
     description: [null],
     unitPrice: [null],
     qty: [null],
     discount: [null],
     vat: [null],
     total: [null],
     amount: [null],
     taxAmount: [null]
  })
]);

我可以有很多这样的表单组，并且我需要关注特定的描述字段。角度有聪明的方法吗？

我必须在另一台电脑上安装一个项目，我使用 Angular v 9.1.0 但运行 npm install 后出现此错误：

\n

node_modules/angular-shepherd/lib/shepherd.service.d.ts:64:18 中的错误 - 错误 TS2314：通用类型 \'\xc9\xb5\xc9\xb5FactoryDe​​f\' 需要 2 个类型参数。

\n\n

64 静态 \xc9\xb5fac: i0.\xc9\xb5\xc9\xb5FactoryDe​​f;

\n

我在两台电脑上都有相同版本的软件包angular-shepherd": "^0.5.0

我已经尝试删除并重新安装 node_modules 以及 Angular-shepherd 包，但仍然出现错误。\n在旧电脑中，一切正常。\n如果它有帮助，则这是该包：

"dependencies": {\n    "@angular/animations": "^9.1.0",\n    "@angular/cdk": "^9.1.0",\n    "@angular/common": "^9.1.0",\n    "@angular/compiler": "^9.1.0",\n    "@angular/core": "^9.1.0",\n    "@angular/forms": "^9.1.0",\n    "@angular/material": "^9.1.0",\n    "@angular/material-moment-adapter": "^9.1.0",\n    "@angular/platform-browser": "^9.1.0",\n    "@angular/platform-browser-dynamic": "^9.1.0",\n    "@angular/platform-server": "^9.1.0",\n    "@angular/router": "^9.1.0",\n    "@angular/service-worker": "^9.1.0",\n    "@auth0/angular-jwt": "^3.0.1",\n    "@fullcalendar/angular": "^4.4.5-beta",\n    "@ngx-translate/core": "12.1.2",\n    "@ngx-translate/http-loader": "4.0.0",\n    "angular-shepherd": "^0.5.0",\n    "animate.css": "3.7.2",\n    "bootstrap": "4.4.1",\n    "chart.js": "^2.9.3",\n …