我在从 angular 8 更新到 9 并运行时遇到了以下错误

ng update @angular/material：

包“@angular/flex-layout”与“@angular/cdk”有不兼容的对等依赖（需要“^8.0.0-rc.0”，会安装“9.0.0”）。

我正在尝试在应用程序中使用 Angular Material 库创建故事书nx，但我无法显示该库附带的样式。因此组件会呈现，但没有随之而来的样式。我已将组件添加到 Storybook 中，如下所示：

export default {
  title: 'Buttons',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [
        MatButtonModule
      ],
    }),
  ]
} as Meta<ButtonComponent>;

此屏幕截图显示了主按钮，但没有获得正确的紫色样式。

我该如何将这样的内容导入 Storybook 以便主题得以体现？

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

这也是一个nx应用程序，所以没有angular.jsonaproject.json和 a workspace.json。我尝试将主题添加到project.json下面，但不起作用，我认为它需要以某种方式直接传递到故事书而不是在project.json内部（这将适用于应用程序本身而不是故事书）？

"build": {
      "options": {
        "styles": [
          "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ],
        "scripts": []
      }
    },

使用Angular Material "13.2.3"、"@nrwl/storybook": "13.8.3"，然后使用这些附加库：

"@storybook/addon-essentials": "6.5.0-alpha.41",
"@storybook/addon-knobs": "6.4.0",
"@storybook/addons": "^6.5.0-alpha.41",
"@storybook/angular": "6.5.0-alpha.41",
"@storybook/api": "6.5.0-alpha.41",
"@storybook/builder-webpack5": "6.5.0-alpha.41",
"@storybook/core-server": "6.5.0-alpha.41",
"@storybook/manager-webpack5": …

我的 nx monorepo Angular 项目使用版本 5.78.0 正确构建，但升级到 5.79.0 后出现以下错误

NX：15.9.2 角度：15.2.6

 Error: Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.destructuringAssignmentPropertiesFor is not a function

期望项目能够正确构建

我正在使用 html2canvas 和 jsPDF 生成 pdf 客户端。无论我选择什么设置，我都会在 html 到 pdf 渲染中丢失字母空格。

有设置可以解决这个问题吗？我已经检查了 API 并更改了我能想到的所有可能的设置，但间距没有改变。

显示空间损失的图像

之前（在浏览器中为 html）：

之后（pdf）：

代码

代码使用 html2canvas 和 jsPDF。

async pdfOrder() {
    const doc = new jsPDF({
      orientation: "p",
      unit: "mm",
      format: "a4",
      precision: 5
    });
    const options = {
      background: "white",
      scale: 3
    };

    for (let i = 0; i < this.numberOfPages; i++) {
      const div = document.getElementById("html2Pdf-" + i.toString());
      // create array of promises
      await this.addPage(doc, div, options, i);
    }

    // Name of pdf …

我正在使用解析器组件，但无法从 url 获取 id。

Stackblitz - https://stackblitz.com/edit/angular-x4djgz

如果我导航到supplier/3：

我params.get('id') null从解析器和params.get('id') 3最终组件中获取。如何在解析器中获取端点 ID。

route.paramMap.subscribe(
    (params: ParamMap) => {
      console.log("params.get('id')", params.get('id'));
    }
);

这个问题已经过大量编辑，因为我最初认为这与作为 angular+electron 应用程序有关。

我是新手@ngrx/data，正在查看文档。

使用该指南，我已经能够复制以前手动完成的操作 - 例如，使用此概述页面上的服务，以下工作调用 REST-API 并将供应商添加到商店。

组件.ts

  onSave(supplier: Supplier) {
    this.supplierService.add(supplier);
  }

我知道为了达到效果，我可以执行以下操作：

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType('[Supplier] @ngrx/data/save/add-one/success'),
        tap(console.log)
      ),
    { dispatch: false }
  );

但是 - 是否有一种类型安全的方法来挂钩成功的 API 调用操作/实体操作？

更新-澄清

我正在使用@ngrx/data，所以我不会直接自己创建操作以及类型的导出。

成功添加供应商后 - 在 http 调用后会产生以下类型的操作：'[Supplier] @ngrx/data/save/add-one/success'- 我想要执行效果。除了使用字符串'[Supplier] @ngrx/data/save/add-one/success'（如上所示）之外，还有类型安全的钩子吗？

以前（当我自己创建操作时）我会导出联合类型并执行ofType(supplierActions.addSupplier)

更新 - 更接近答案

找到了ofEntityType，ofEntityOp这让我更接近我的目标，因为这些工作如下ofType：

  hello$ = createEffect(
    () =>
      this.actions$.pipe(
        ofEntityType('Supplier'),
        ofEntityOp(EntityOp.SAVE_ADD_ONE_SUCCESS),
        tap(console.log) …

使用@ngrx/data我想以getWithQuery不同于默认值的方式处理API 调用的结果。

目前，如果这返回一个实体数组，则entityCache直接加载到.

到目前为止，我已经使用了概述中显示的标准模式：

export const entityMetadata: EntityMetadataMap = {
  PurchaseOrder: {}
};

@Injectable({
  providedIn: "root"
})
export class PurchaseOrderService extends EntityCollectionServiceBase<
  PurchaseOrder
> {
  constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
    super("PurchaseOrder", serviceElementsFactory);
  }
}

相反，我想处理以下 API 响应并entities像往常一样将加载到entityCache 中，getWithQuery但也将其粘贴total在我商店的其他地方。

{
    "entities": [{...}, {...}, ..., {...}],    // list of entities
    "total": 100
}

如果返回此 API 响应，我自然会收到以下错误：

我的理解是，为每个提供EntityCollectionDataService接口和add / delete / getAll / getById / …

总结问题

Stackblitz - https://stackblitz.com/edit/angular-touch-playground

我正在尝试注册触摸事件，并希望能够触摸我的手指，拖动并抬起我的手指，从而td突出显示每个触摸过的表格。这似乎被记录为一个pan事件

pressed当任何事件click, touch, etc注册并[class.bg-warning]="pressed[i]"突出显示时，我使用了字典。

有没有办法注册每个td触摸？

我已经尝试过诸如click, touchstart 和事件之类的hammerjs事件（在app.module.ts我通过 导入import 'hammerjs';），但我必须单击每个td以突出显示它。

<td *ngFor="let dummy of ' '.repeat(48).split(''), let i = index"
    (press)="logPress(i)"
    (mouseenter)="logMouseIn(i)"
    (touchmove)="logTouchmove(i)"
    (click)="logClick(i)"
    (touch)="logTouch(i)"
    (touchend)="logTouchend(i)"
    (hover)="logHover(i)"
    (touchstart)="logTouchstart(i)"
    (touchend)="logTouchend(i)"
    (touchcancel)="logTouchcancel(i)"
    [class.bg-warning]="pressed[i]" >
</td>

设置pressed字典的例子：

logClick(i: number) {
 this.event += '\n Click: '+ i.toString();
 this.pressed[i]=1;
}

问题

该Access-Control-Allow-Origin响应头的请求匹配Origin头，但我仍然得到错误 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myappname.herokuapp.com/api/v1/products. (Reason: CORS request did not succeed).[Learn More]

标题

响应头

HTTP/1.1 308 PERMANENT REDIRECT
Connection: keep-alive
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization, content-type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://localhost
Content-Length: 311
Content-Type: text/html; charset=utf-8
Date: Thu, 04 Apr 2019 10:03:39 GMT
Location: http://mpappname.herokuapp.com/api/v1/products/
Server: waitress
Via: 1.1 vegur

请求头

Host: mpappname.herokuapp.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) …

当我尝试监听响应式表单上的值更改时，遇到以下错误：

该表达式不可调用。类型 'Observable<字符串 | null>' 没有呼叫签名。

wordToSearch = this.fb.group({
  word: ['']
});

ngOnInit(): void {
  this.wordToSearch.get('word')!.valueChanges()
}

According to https://nx.dev/recipes/generators/creating-files

Generators provide an API for managing files within your workspace. You can use generators to do things such as create, update, move, and delete files.

it's possible to delete files in an NX generator.

I have the following code that generates a node application but I want to delete some of the generated files.

import { readProjectConfiguration, Tree } from '@nrwl/devkit';
import { applicationGenerator } from '@nrwl/node'

export interface Schema {
  name: string
}

export default …