问题标签 [angular10]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
272 浏览

node.js - Angular CLI 10 ng build --prod 发出空行

使用 CLI 构建 Angular 应用程序时,如果我们使用ng build --prod它将发出2 个空行,如果我删除--prod,这些空行就消失了。

在此处输入图像描述

在我的开发环境中,它非常小,但是当我尝试通过TFS 构建应用程序时,这些空行会导致构建失败

在此处输入图像描述

我的应用程序是使用创建的新应用程序ng new <appname>

环境细节:-

如何删除这些空行..任何想法?

Angular CLI 中未出现此问题:7.1.4

0 投票
1 回答
84 浏览

angular - 如何递归显示不同的组件?

我有一个app-document-form-node递归构建组件的组件。

组件应用程序文档表单节点:

问题在部分<ng-container *ngIf="block.type === fielType.Block"></ng-container>

当它发生时,所有子组件都应该放在组件中<app-adresat-list,,,,<app-word-settings>以防万一。<app-parameters>app-document-parametersblockchildren

现在它可以工作了,但毕竟上面提到的组件:

结果if block.type === fielType.Block它呈现一个特定的组件,然后在外面呈现他的孩子。但是如果存在子元素,它应该在具体组件中呈现。

如何解决?

我的主要范围是递归显示组件,但根据条件显示不同的组件*ngIf="block.tag

作为解决方案:

我可以在, ,<app-document-form-node>的模板中添加,但它会调用循环依赖组件错误。<app-adresat-list<app-word-settings><app-parameters>app-document-parameters

另一个假设<ng-template #children>是在每个组件中使用参考和投影:

上面的代码有效,但以错误的顺序呈现组件

0 投票
1 回答
6803 浏览

angular - Angular 10:使用变量设置 IFrame URL 输入

我正在尝试使用下面的组件设置 IFrame 源输入。

由于某种原因它不起作用,没有显示网页。如何正确设置输入源?

调用方法:

打字稿:

HTML:

错误:

没有源头被设置,

在此处输入图像描述

资源:这仅适用于 Angular 1

如何从 AngularJS 中的变量设置 iframe src 属性

0 投票
1 回答
155 浏览

angular - 通过搜索过滤 ng-for 中的项目并为有结果的项目显示类别

我创建了一个应用程序来显示 JSON 中的元素。我在一个大数组中有 1500 多个项目,以及一个包含按类别排序的项目的数组数组。

我已经实现了一个过滤器来搜索每个项目中的属性,它在我的 *ngFor 上运行。

问题是我还需要按类别对项目进行排序,每个类别都有一个标题。

我现在有 2 个循环,一个用于 sortedByCategory 数组中的每个类别,一个用于一个类别中的每个项目。

问题是如果我过滤的结果是空的,类别名称仍然存在。

我如何构造我的代码,以便仅当嵌套的 ngFor 循环在过滤器之后有元素时才出现类别名称?嵌套循环和过滤器的想法是必要的,还是可以以更高效的方式制作?

0 投票
1 回答
108 浏览

angular - 升级到 Angular 10 后无法在单元测试中找到库别名

升级到 Angular 10 后,我在运行库的单元测试时遇到问题。

我有两个项目库。例如 LibTest1 HeroTest2

HeroTest2 消耗 LibTest1

项目 tsconfig.json 包含

项目库 HeroTest2 tsconfig.lib.json 包含

项目库 HeroTest2 tsconfig.spec.json 包含

项目库 HeroTest2 package.json 包含

我将 HeroTest2 中的 LibTest1 导出模块导入为

构建库并运行应用程序时没有问题。HeroTest2 识别 LibTest1 并且构建良好。

在 HeroTest2 的单元测试中,我添加了来自 LibTest1 的模块

为 HeroTest2 运行单元测试时出现以下错误

任何帮助,将不胜感激。

0 投票
1 回答
666 浏览

django-rest-framework - “日期格式错误”Angular 10 Rest Django

嗨,我是这两个框架的新手,我需要你的帮助!

因此,我将 Rest Django 用于后端,将 Angular 用于 Frontent,我也将 Angular 材料用于 DatePicker,尽管我将日期格式更改为 YYYY-MM-DD 到 DatePicker 我仍然收到错误消息“日期格式错误。请改用以下格式之一:YYYY-MM-DD。” 发送api时由服务器!

要更改 Angular 中的日期格式,我将此代码用于 app.module

在 console.log('date',this.date) 之后查看我收到的 datepicker 输入的日期对象

你知道我该如何解决这个问题吗?

0 投票
1 回答
3090 浏览

angular - Angular 10:mat-elevation-z 不适用于任何组件

我在 mat-toolbar e mat-card 元素中使用 mat-elevation-z4 类,它根本不起作用。即使我没有在这些元素中应用任何其他 CSS。

版本:
Angular CLI:10.0.6
节点:10.14.2
操作系统:win32 x64
Angular:10.0.9

该应用程序在 Chrome 桌面上运行,我也在 Firefox 中尝试过。

我用它来尝试修复:但它只在工具栏中工作并产生了其他错误:

我的垫卡:

我不想盲目地安装旧版本的 Angular,希望问题消失。

我怎样才能解决这个问题?

PS:巧合的是,在同一个项目中,我有材质按钮,它们的样式可以正常工作,除了垫升按钮,它是“3D”的。看起来Angular在控制z-index时遇到了一些问题......

看看我的工具栏的 mat.elevation-z8 类

在此处输入图像描述

在这里,和我的垫卡一样

在此处输入图像描述

0 投票
1 回答
1016 浏览

angular - Angular 10 - 使用订阅时更改 AfterViewInit 中的执行顺序

我有这个 ngAfterViewInit 生命周期钩子:

我希望订阅在订阅之外的那个之前运行this.getData(),并且只有在没有发生的情况下,我希望this.getData()订阅之外的那个运行。

我怎样才能做到这一点?将它放在 ngOnInit 中不起作用,因为这是一个分页表,并且仅在呈现页面后才起作用。当用户向表中添加新数据并且我希望它自动可见时,我需要订阅。

编辑 如果我像上面写的那样运行代码,那么当第一次导航到页面时,我的数据会正确地从服务器加载到我的分页表中。然后,用户可以使用另一个组件中的表单添加新的数据项。当用户完成添加新项目时,他们将导航回此表。现在看起来,表格首先在没有新增内容的情况下加载,然后重新加载新增内容。我想要发生的是第一次加载对用户不可见 - 这样当他们被导航回来时,他们会立即看到正确的数据。

0 投票
2 回答
611 浏览

angular - *ngIf 在我的 Html 中不起作用,但 ngIf 显示第一个内容

我已经看到了很多关于这个问题的问题。但他们对我没有帮助。

这里是我的 HTML

如果我像这样使用 *ngIf 它什么也没有显示。但使用 like ngIf 会显示第一个内容。

这里是我的组件。

在这里我添加了stackblitz url:https ://stackblitz.com/edit/angular-lmxswk?file=src/app/app.component.ts

我已经将 CommonModule 导入了 appModule。

我使用的是最新版本的 Angular。(10)

0 投票
1 回答
1145 浏览

angular - IIS 中的 Angular 10 --deploy-url 资产路径

从版本 7升级到Angular 10后,资产文件夹的字体和图像未在浏览器中加载并出现 404 错误。

我将我的 Angular 应用程序托管在IIS的子目录中, 并使用--deploy-url& --base-hrefswitch 来构建我的应用程序。

我的构建命令:

ng build --prod --base-href /MyApp/ --deploy-url /MyApp/Scripts/

Scripts 文件夹包含构建命令的所有输出。我将组件内的图像称为:

并将字体称为:

我注意到 Angular CLI 7 和 Angular CLI 10 中的构建输出不同。 在此处输入图像描述 在这里我们可以看到,使用Angular 7,我们有正确的路径来定位 Web 服务器中的图像,但在Angular 10中,我们只有部分路径会导致 404 错误.

请建议。