angular 相关问题

angular：使用 ngFor

在此输入图像描述 我有一个数组。它包含如下条目： array[0].name 和 array[0].value 。这是最简单的部分。 我可以显示第一个项目： 在此输入图片描述 我有一个数组。它包含如下条目： array[0].name 和 array[0].value 。这是最简单的部分。 我可以通过以下方式显示第一个项目： <div *ngFor="let item of fields;let i = index"> i: {{ i }} {{ item.value }} </div> 效果很好。 但是我还有一个数组，其中包含一个数组，该数组也可能包含一个数组。 这应该如何在 Angular 模板中正确实现？ 这不起作用 <div *ngFor="let itemJ of item.value;let j = index"> j: {{ j }} {{ itemJ.value }} </div> 假设您有以下数据结构： fields = [ { name: 'Item 1', value: [ { name: 'Sub-item 1.1', value: [ { name: 'Sub-sub-item 1.1.1', value: 'Value 1.1.1' }, { name: 'Sub-sub-item 1.1.2', value: 'Value 1.1.2' }, ], }, { name: 'Sub-item 1.2', value: 'Value 1.2', }, ], }, { name: 'Item 2', value: 'Value 2', }, ]; 模板实现 <div *ngFor="let item of fields; let i = index"> <div> i: {{ i }} {{ item.name }} - {{ item.value }} </div> <!-- Check if value is an array --> <div *ngIf="item.value && item.value.length" style="margin-left: 20px;"> <div *ngFor="let subItem of item.value; let j = index"> <div> j: {{ j }} {{ subItem.name }} - {{ subItem.value }} </div> <!-- Check if value is an array --> <div *ngIf="subItem.value && subItem.value.length" style="margin-left: 20px;"> <div *ngFor="let subSubItem of subItem.value; let k = index"> <div> k: {{ k }} {{ subSubItem.name }} - {{ subSubItem.value }} </div> </div> </div> </div> </div> </div>

如何检查一个对象是否存在于 Angular 的 2 个数组中

如果您有一个必须根据另一个数组值进行过滤的数组。 必须过滤的列表 [ { name: 'Anna', 年龄: 23, 技能: [{name: 'a', desc: 'aaa'}] }, { 姓名：“芭芭拉”，年龄：26，

React JS 中的 NavLink 无法按预期工作？

所以，我正在使用 ReactJS。在 Sidebar 中）使用了 NavLink，但是当我使用嵌套路由时，它没有按预期工作。 所以，我正在使用 ReactJS。在侧边栏中）使用了 NavLink，但是当我使用嵌套路由时，它没有按预期工作。 <li> <NavLink role="button" to="/organization/" className="flex flex-row justify-start gap-2 items-center" > <MdDashboard /> Dashboard </NavLink> </li> <li> <NavLink role="button" to="/organization/customization" className="flex flex-row justify-start gap-2 items-center" > <MdOutlineDeveloperMode /> Customization </NavLink> </li> 嵌套路由 = http://localhost:3000/organization/customization 它为 /organization 和 /organization/customization 添加了活动课程 我想确保嵌套路由可以与 NavLink 配合使用。 因此，您需要添加“结束属性”，例如： <NavLink end role="button" to="/organization/" className="flex flex-row justify-start gap-2 items-center" > <MdDashboard /> Dashboard </NavLink>

Angular：成功/警告/错误消息服务

我们有一个 Angular 应用程序，我们需要在其中显示一些成功/警告/错误消息。目前的解决方案是我们有一个组件（放置在每个组件内部，我们需要在其中显示...

有角度的材料设计不需要单选按钮，而只需要按钮[关闭]

下面是我的div 下面是我的div <div class="formField"> <mat-radio-group aria-label="Select a state" formControlName="selectedActivity"> <mat-radio-button style=" display: inline-flex !important; align-items: center; justify-content: center; margin: 5px; border: 1px solid #bdbdbd !important; background-color: #fff !important; box-sizing: border-box !important; position: relative; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; " [value]="selectItem" *ngFor="let selectItem of selectArray" (click)="checkRadioButton($event)"> <span [appTranslate]="selectItem.select"></span> </mat-radio-button> </mat-radio-group> </div> div 当前显示此 我需要这个布局 我尝试使用按钮但不起作用，垫按钮也不起作用 我正在使用角度 16 您可以使用scss来实现这一点，我们只需隐藏与单选按钮部分.mdc-radio相关的部分，我们将其设为零宽度并使用overflow: hidden隐藏溢出的内容。然后我们只需设置其余元素的样式即可实现所需的输出。 :host ::ng-deep .custom-radio-group { mat-radio-button { display: inline-flex !important; align-items: center; justify-content: center; margin: 5px; border: 1px solid #bdbdbd !important; background-color: #fff !important; box-sizing: border-box !important; position: relative; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .mat-mdc-radio-checked { background-color: lightblue !important; border: 1px solid blue; } .mdc-label { cursor: pointer; padding: 2px 20px !important; } .mdc-radio { width: 0px !important; overflow: hidden !important; padding-left: 0px; padding-right: 0px; } } Stackblitz 演示

无法npm安装web项目，出现JSON解析问题

npm 错误！路径 coomon-web\src\main\webclient/package.json npm 错误！ JSON.parse 在 JSON 中的位置 2317 处解析“...mations\”附近出现意外标记“c”（0x63）：\“17.3.12\&

通过组件重新加载导航到当前相同的 URL，而不是整个页面

我正在使用 Angular 5 库，我想通过重新加载（刷新）整个组件而不是页面来导航到当前 URL，我已经在 Angular 文档中阅读了有关导航到当前 URL 的信息。 还有那个...

如何在不重新加载整个页面的情况下重新加载组件

我想重新加载路线，但不重新加载整个页面。这不是我想要的： window.location.reload(); 我只想重新加载组件而不是页面。这是我尝试过的： 角度：

如何在 Angular 中重新加载组件而不重新加载整个页面

我想重新加载路线，但不重新加载整个页面。这不是我想要的： window.location.reload(); 我只想重新加载组件而不是页面。这是我尝试过的： 角度：

如何从外部非角度网址导航到角度页面？

感谢您的阅读， 我有一个角度应用程序部署到 www.mydomain.com/myapp 从主页我可以路由到另一个页面 www.mydomain.com/myapp/page2 我有一个外部网站，我想要...

不同节点版本中的 Angular 19 CLI Builder 问题

我通常可以使用节点 18.10.1 或 20.9.0 在 Angular 17 中构建我的应用程序。 当我更新到 Angular 19 时，我的构建停止工作。 这是我的 package.json。 { “名称”：“应用程序”...

无法在 Angular cli 18 中加载grapesjs-blocks-basic

请注意，我们正在使用最新的 Angular 和 NodeJS 版本，我们希望包含 GrapesJS 基本块，并按照 https://github.com/GrapesJS/blocks-basic 中提到的步骤进行操作 安装后...

我有一个动态组件，但它不会导入任何模块，例如 Common 和 Forms 模块

我有一个使用动态组件来显示子组件的组件： 在父组件中，子组件被声明为这样 @ViewChild('lscRef', { 读取: ViewContainerRef, static: false }) //...

如何在 Angular 应用程序中安全地对图像应用模糊效果以防止用户操纵？

我正在开发一个 Angular 应用程序，其中显示的图像包含敏感信息，并且我想对这些图像应用模糊效果。但是，我不希望用户能够检查...

在 Angular 中使用音频工作集的实用方法是什么？

我知道我们始终可以以本机方式加载音频工作集（通过使用 AudioContext.audioWorklet.addModule），但它要求我们用纯 Javascript 编写它并处理捆绑我们的依赖项...

我在 Angular 中有一个动态组件，它不会导入任何模块，例如 Common 和 Forms 模块

我有一个使用动态组件来显示子组件的组件： 在父组件中，子组件被声明为这样 @ViewChild('lscRef', { 读取: ViewContainerRef, static: false }) //...

如何在Aspire服务发现中获取注入的URL

我目前有两个项目： API后端 Angular 前端有自己的最小后端。 前端项目有 2 个目的： 服务于角度应用程序 提供一个端点/设置...

如何拥有路守，通过后路由到辅助路线？

我的 Angular 应用程序的一部分只能通过发送到用户电子邮件（Docusign 类型的东西）的生成链接来访问。它通过功能模块与应用程序的其余部分分开......

需要帮助定义自己的 Observable 以验证 Angular 17 中的文件上传

我正在学习 Angular 17 中的文件上传教程，但实际上，他们使用 Observable.create，它在 Angular 17 中已弃用。我已经阅读了有关实现新系统的文档，但确实如此。 .

为什么状态中没有设置动作值？

鉴于以下状态 导出常量初始状态：状态= { 过滤器：{ 预先输入：[]， }, 案例：[] 作为 CaseData[]， 记录审查：{} 作为 DCMedicalRecordsReview， 案例...