标签: angular8

我从 angular 6 升级到 8 并更新了项目中使用的所有库。一切似乎都运行良好，但是当我使用 ng build --prod 时，出现这些错误

ERROR in Error during template compile of 'Injectable'
  Function calls are not supported in decorators but '?makeDecorator' was called.
Error during template compile of 'Directive'
  Function calls are not supported in decorators but '?makeDecorator' was called.
Error during template compile of 'NgModule'
  Function calls are not supported in decorators but '?makeDecorator' was called.
Error during template compile of 'Injectable'
  Function calls are not supported in decorators but '?makeDecorator' was called. …

我已将我的Angular 4应用程序更新为Angular 8。应用程序在开发构建中运行良好，但在生产构建中中断。加载应用程序时出现以下错误。

未捕获的类型错误：无法读取 d3.js:8 at Object../node_modules/d3/d3.js (d3.js:9554) at webpack_require (bootstrap:78) at Module../src/ 处未定义的属性“文档” app/pages/home/dashboard/map/map.component.ts (main-es2015.js:9841) at webpack_require (bootstrap:78) at Module../src/app/pages/home/home.routes.ts ( home.routes.ts:2) at webpack_require (bootstrap:78) at Module../src/app/pages/home/home.module.ts (home.event.bus.ts:5) at webpack_require (bootstrap:78) )

我的tsconfig.json文件看起来像这样。

{
  "compileOnSave": false,
  "compilerOptions": {
  "importHelpers": true,
  "outDir": "./dist/out-tsc",
  "baseUrl": "src",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es2015",
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ],
  "module": "esnext",
  "paths": {
    "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect- 
     metadata"],
    "core-js/es6/*": …

我正在努力尝试将给定的图像 url 转换为 base64 ......在我的情况下，我有一个带有图像路径的字符串

var imgUrl = `../../../../../assets/logoEmpresas/${empresa.logoUrl}`

我怎样才能直接在 base64 中转换给定的图像 url？...我试过这篇文章。

以角度 2 将图像转换为 base64

但是这篇文章是从表单中获取图像...我该如何调整它？

我正在尝试使用 bootstrap4.3 类显示下拉菜单，但在菜单上选择后什么都不会发生，我使用的是 angular 8 版本。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

在我浏览了下面的 ngrx 隔离测试视频后： John Crowson - 在 NgRx 8 中使用 MockStore | 角度向上

我尝试在我的简单项目中实现相同的功能。但是我收到了我无法理解的错误。有人帮我解决吗？

这对我帮助很大。

测试 ts 文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { ShellHomeComponent } from './shell-home.component';
import { StoreOne } from './../../models';
import { Store, select } from '@ngrx/store';
import { cold } from 'jasmine-marbles';

describe('ShellHomeComponent', () => {

    let component: ShellHomeComponent;
    let fixture: ComponentFixture<ShellHomeComponent>;
    let mockStore: MockStore<StoreOne>;

    const loadingState = {
        loading: true,
        items: [{ name: …

html代码：

ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'mat-focused: false'。当前值：'mat-focused: true'。

当我单击 packmaterial 输入时，它给出了这个错误。

<div formArrayName="packageArray" *ngFor="let item of packageArray.controls; let i = index;">
                <div [formGroupName]="i" class="add-div" >
                    <p>Level {{i+1}} Pack</p>
                <div class="d-flex justify-content-between">
                       <mat-form-field>
                             <input matInput type="text"  (click)="addLevelPack(i)" placeholder="Package Material" formControlName="packMaterial" required> 

在这一行，我有这个错误

                             </mat-form-field>
                           <mat-form-field>
                                  <input matInput type="text" placeholder="UOM" formControlName="UOM" required>
                          </mat-form-field>
                            <mat-form-field>
                                  <input matInput type="text" placeholder="Quantity" formControlName="Quantity" required>
                            </mat-form-field>
                            <mat-form-field>
                                <input matInput type="text" placeholder="Weight(kgs)" formControlName="weight" required>
                             </mat-form-field>
                         </div>
                    </div>
                 </div>
<div class="btn-custom" (click)="addPackage()">
        <span mat-raised-button style="cursor:pointer">Add packaging +</span>   
    </div>
    <p>Total packaging</p>

       <div *ngFor="let item of …

我正在尝试使用 forkJoin 来执行多个 http get 请求，然后使用 Angular 8 将所有结果组合成一个简单的数组。

问题是我最终得到了一个数组数组......而不是一个字符串数组

我的代码如下。所有端点都返回一个字符串列表。

autoCompleteValues: any;

ngOnInit() {

    let res1 = this.dataMessageService.getFoo1();
    let res2 = this.dataMessageService.getFoo2();
    let res3 = this.dataMessageService.getFoo3();
    let res4 = this.dataMessageService.getFoo4();
    let res5 = this.dataMessageService.getFoo5();

    forkJoin([res1, res2, res3, res4, res5]).subscribe(data => {

      this.autoCompleteValues = data;
      console.log(this.autoCompleteValues);
    });
}

我究竟做错了什么？如何将所有结果合并到一个大数组中？

在我的应用程序中，我从 API 响应中获取消息发送日期，我想使用 ngFor 中的 angular 8 和 map 计算当前日期与 API 响应日期之间的差异（天数（差异））。

https://stackblitz.com/edit/angular-xv1twv?file=src%2Fapp%2Fapp.component.html

请帮我。我应该使用时刻。

我尝试使用 HostListener 跟踪滚动位置以更改标题的颜色。

我的标题组件如下，

import { Component, OnInit, Input, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log(window.scrollY);
  }

}

但是当我滚动时，我没有在控制台中收到任何日志。

我尝试将 HostListener 放在主 app.component 中，因为我的头组件正在定位，但是我仍然没有得到任何结果，也没有错误。

谢谢

您好，我正在开发一个带有 angular 8 的应用程序，其中我有一个仅包含年份编号的输入。我使用过 mat-datepicker 并且只想选择年份。

<mat-form-field class="input-control">
      <input matInput placeholder="{{'enter'|translate}}.." [formControl]="form.controls.openedAt"
             [matDatepicker]="date" readonly>
      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
      <mat-datepicker #date startView="multi-year"></mat-datepicker>
    </mat-form-field>

此代码首先显示年视图，但是当我选择年份时，将打开月视图，然后打开天视图。

那么如何在 mat-datepicker 上仅选择年份或仅显示年份视图？