问题标签 [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.
angular - 如何递归显示不同的组件?
我有一个app-document-form-node
递归构建组件的组件。
组件应用程序文档表单节点:
问题在部分<ng-container *ngIf="block.type === fielType.Block"></ng-container>
。
当它发生时,所有子组件都应该放在组件中<app-adresat-list
,,,,<app-word-settings>
以防万一。<app-parameters>
app-document-parameters
block
children
现在它可以工作了,但毕竟上面提到的组件:
结果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>
是在每个组件中使用参考和投影:
上面的代码有效,但以错误的顺序呈现组件
angular - Angular 10:使用变量设置 IFrame URL 输入
我正在尝试使用下面的组件设置 IFrame 源输入。
由于某种原因它不起作用,没有显示网页。如何正确设置输入源?
调用方法:
打字稿:
HTML:
错误:
没有源头被设置,
资源:这仅适用于 Angular 1
angular - 通过搜索过滤 ng-for 中的项目并为有结果的项目显示类别
我创建了一个应用程序来显示 JSON 中的元素。我在一个大数组中有 1500 多个项目,以及一个包含按类别排序的项目的数组数组。
我已经实现了一个过滤器来搜索每个项目中的属性,它在我的 *ngFor 上运行。
问题是我还需要按类别对项目进行排序,每个类别都有一个标题。
我现在有 2 个循环,一个用于 sortedByCategory 数组中的每个类别,一个用于一个类别中的每个项目。
问题是如果我过滤的结果是空的,类别名称仍然存在。
我如何构造我的代码,以便仅当嵌套的 ngFor 循环在过滤器之后有元素时才出现类别名称?嵌套循环和过滤器的想法是必要的,还是可以以更高效的方式制作?
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 运行单元测试时出现以下错误
任何帮助,将不胜感激。
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 输入的日期对象
你知道我该如何解决这个问题吗?
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 类
在这里,和我的垫卡一样
angular - Angular 10 - 使用订阅时更改 AfterViewInit 中的执行顺序
我有这个 ngAfterViewInit 生命周期钩子:
我希望订阅在订阅之外的那个之前运行this.getData()
,并且只有在没有发生的情况下,我希望this.getData()
订阅之外的那个运行。
我怎样才能做到这一点?将它放在 ngOnInit 中不起作用,因为这是一个分页表,并且仅在呈现页面后才起作用。当用户向表中添加新数据并且我希望它自动可见时,我需要订阅。
编辑 如果我像上面写的那样运行代码,那么当第一次导航到页面时,我的数据会正确地从服务器加载到我的分页表中。然后,用户可以使用另一个组件中的表单添加新的数据项。当用户完成添加新项目时,他们将导航回此表。现在看起来,表格首先在没有新增内容的情况下加载,然后重新加载新增内容。我想要发生的是第一次加载对用户不可见 - 这样当他们被导航回来时,他们会立即看到正确的数据。
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)
angular - IIS 中的 Angular 10 --deploy-url 资产路径
从版本 7升级到Angular 10后,资产文件夹的字体和图像未在浏览器中加载并出现 404 错误。
我将我的 Angular 应用程序托管在IIS的子目录中, 并使用--deploy-url
& --base-href
switch 来构建我的应用程序。
我的构建命令:
ng build --prod --base-href /MyApp/ --deploy-url /MyApp/Scripts/
Scripts 文件夹包含构建命令的所有输出。我将组件内的图像称为:
并将字体称为:
我注意到 Angular CLI 7 和 Angular CLI 10 中的构建输出不同。
在这里我们可以看到,使用Angular 7,我们有正确的路径来定位 Web 服务器中的图像,但在Angular 10中,我们只有部分路径会导致 404 错误.
请建议。