标签: angular9

我试图通过添加实例 id 来封装我的元素 id，如下所示：

<label for="id-{{ unique }}-name"></label>
<input id="id-{{ unique }}-name" type="text" formControlName="name">

我以前使用过这个： https: //stackoverflow.com/a/40140762/12858538。但在将 Angular 从 7 升级到 9 后，这似乎已被弃用。我正在考虑一个简单的帮助服务，它可以为我的应用程序生成唯一的 ID。

像这样的东西：

@Injectable()
export class UniqueIdService {
  private counter = 0

  constructor() {}

  public getUniqueId (prefix: string) {
    const id = ++this.counter
    return prefix + id
  }
}

灵感来自 lodash uniqueid

但我宁愿使用 ids 中构建的角度。所以我目前的解决方案是从组件属性中提取 id _nghost。

constructor ( private element: ElementRef, ) {
   const ngHost = 
     Object.values(this.element.nativeElement.attributes as NamedNodeMap)
     .find(attr => attr.name.startsWith('_nghost'))
     .name
   this.unique = …

我正在努力寻找服务中的哪一个root和platform选项更好。providedIn

两者都使服务在整个应用程序中可用，后者通过服务而前者通过根注入器。对此有什么建议吗？

ngFor 在我的应用程序中不起作用。

我将我的应用程序拆分为单独的模块并包含import { CommonModule } from '@angular/common';在我的子模块和import { BrowserModule } from '@angular/platform-browser';我的app.modules.ts文件中，但我仍然收到以下错误。

Can't bind to 'ngForOf' since it isn't a known property of 'tr'.

我曾尝试查看其他问题，但所有这些问题都只是对include CommonModule，我就是。

这些是我的文件：

crud-list.component.html

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Id</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let item of cruds'>
      <td>{{item.OrderNumber}}</td>
    </tr>
  </tbody>
</table>

crud-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CrudRequestService } from '@modules/crud/crud-services/crud-request.service';

@Component({
  selector: 'app-crud-list',
  templateUrl: './crud-list.component.html',
  styleUrls: ['./crud-list.component.scss']
})
export class …

我有这样的问题

无法添加属性 X，对象不可扩展

在使用 Ngrx 更新将我的 angular 项目更新为 angular 9 之后。当我将 Ngrxversion 回滚到 8 时，它工作正常。但是我还需要使用 angular 9 更新将其更新到 v9。当我将其作为 datasource.data 添加到具有附加属性的材料表中时，就会发生这种情况。我认为额外的属性改变是一个原因。但是我通过使用切片从我们得到并尝试的内容创建了新数组，如下所示。

 myDataArray.slice(0)

它也不起作用。

我在这里参考了 Ngrx 版本 8 到 9 的更改列表和迁移指南https://ngrx.io/guide/migration/v9

我发现有一个与 angular 9 的不变性相关的特殊变化。他们在那里定义了动作、状态和可序列化相关的不变性逻辑。我尝试了他们建议的解决 Ngrx V9 更新问题的方法https://ngrx.io/guide/store/configuration/runtime-checks

但这些对我不起作用。如果有人对此问题有解决方案，这真的很有帮助。提前致谢..

错误堆栈跟踪..（我也使用了 matDataFlatner 这就是对象突变发生的地方）

app-error-handler.ts:30 TypeError：无法添加属性级别，对象不可扩展在 MatTreeFlattener.defaultFlattenerTransform [as transformFunction] (tree-table-flattener-builder.ts:57) at MatTreeFlattener._flattenNode (flat-data- source.ts:58) at flat-data-source.ts:81 at Array.forEach () at MatTreeFlattener._flattenChildren (flat-data-source.ts:78) at MatTreeFlattener._flattenNode (flat-data-source.ts: 65) at flat-data-source.ts:92 at Array.forEach () at MatTreeFlattener.flattenNodes (flat-data-source.ts:92) at MatTreeFlatDataSource.set (flat-data-source.ts:138)

我正在开发一个我们最近在 Angular 9 中启动的项目，该项目是使用 Angular CLI 生成的。我想使用 Jest 而不是 Karma 来运行测试，因为在我看来，在构建管道中设置 Karma 的工作量太大（几年前，我在尝试让 Karma 运行时浪费了很多时间）。

当我尝试运行 Jest 时，出现错误：

ReferenceError: Zone is not defined

      at node_modules/zone.js/dist/zone.js:670:5
      at performance (node_modules/zone.js/dist/zone.js:8:9)
      at Object.<anonymous> (node_modules/zone.js/dist/zone.js:9:2)

我安装 Jest 的步骤是：

1. 安装 Jest 本身

npm install -D jest jest-preset-Angular @types/jest ts-jest

2. 从 package.json 中删除所有 karma/jasmine 库

3. 更新了 tsconfig.spec.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

4. 添加jest.config.js：

const …

我正在寻找当角度材质表（mat-table）渲染完成时触发的事件。

我认为需要在数据源更改时触发，或者用户更改显示的列或发生分页事件（但与数据源更改相同），或者发生重新渲染事件的任何其他事件。

我尝试了通用，ngOnChanges但当用户更改显示的列时它不会触发。

有类似的活动我可以听吗？

我在 Angular 9 项目中使用 @Output 装饰器，代码如下：

@Output('myMethod') myMethod: EventEmitter<any> = new EventEmitter();

Typescript 给了我一个错误，并迫使我在代码中添加以下内容以消除错误：

// tslint:disable-next-line:no-output-rename

如何在不禁用规则的情况下解决此问题？

我正在努力将我的项目从 Angular 8 升级到 9，并且在扩展类时遇到了新需求的问题。

根据 Angular 的文档：

使用 Angular 功能的未修饰基类

从版本 9 开始，不推荐使用未修饰的基类：

• 使用 Angular 功能
• 由指令或组件扩展

Angular 生命周期挂钩或以下任何 Angular 字段装饰器都被视为 Angular 功能：

• @Input()
• @Output()
• @HostBinding()
• @HostListener()
• @ViewChild()/@ViewChildren()
• @ContentChild()/@ContentChildren()

对于@Component装饰器，它需要基类上的templateor 。templateURL添加任一都会导致子类不呈现其模板。

例如，以下结果不会在视图上呈现任何内容：

@Component({
  template: ''
})
export abstract class BaseComponent<T extends AbstractSuperEntity> extends Toggler implements OnChanges {
  @Input()
  year: number | string

  constructor(service: MyService) {

  }

  ngOnChanges() {
  }
}

@Component({
  templateUrl: 'my.component.html',
  selector: 'my-component'
})
export …

我正在开发一个项目，其中有很多路线，每次单击链接转到特定路线时，页面不会自动滚动到顶部，这很烦人而且不好。请问有人知道如何解决这个问题吗？

我正在学习 Angular Ivy 编译器。这是我的理解。

Ivy 的编译器 - 由 ngtsc 和 ngcc 组成

ngc - AOT 编译器

ngtsc - 是 tsc 的包装

ngcc - 是编译 pre-Ivy 库的兼容性编译器

tsc - 是一个打字稿编译器

参考此链接，了解 Ivy 的架构 https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md

AOT 编译器的链接， https://github.com/angular/angular/blob/5b31a0a2942c50059cac4c7ccb92047a50473347/aio/content/guide/aot-compiler.md

AOT 编译器和 ngtsc（作为 Ivy 的一部分）都执行此操作 - “将您的 Angular HTML 和 TypeScript 代码转换为高效的 JavaScript 代码”？

Ivy + AOT编译时，ngtsc和AOT编译器（ngc）的功能是什么？

谢谢