angular 相关问题

如何使用新的输入API [Angular19]从ControlValueAccessor接口实现setDisabledState

尝试运行新输入 API 的迁移（启用 --insert-todos）后，我的自定义文本输入组件如下所示： 文本输入.component.ts 导出类 TextInputComponent 实现...

离子控制控制器模态高度

我正在使用像这样启动的控制器弹出窗口 异步 openNwInsights(){ const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthComponent }) 模态.present(); ...

ngx-translate 错误：没有 TranslateStore 的提供者

当前行为 当我尝试将 ngx-translate/core (16.0.3) 与 ngx-translate/http-loader (16.0.0) 和 Angular (19.0.4) 一起使用时 该项目正在使用 NX 和带有独立组件的模块联合...

取消订阅 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> 我传入的 Json 看起来像： { "Name": "Person", "value": { "adresses": [ { "Name": "Adress1", "value": { "city": { "Name": "City", "value": "Tokio" }, "zip": { "Name": "zip", "value": "90210" }, "street": { "displayName": "Street1", "value": "road to nowhere" } } }, { "Name": "Adress2", "value": "Perth" } ], "salutation": { "value": "Sir" }, "dob": { "displayName": "DateOfBirth", "value": "19700101" } } } 假设您有以下数据结构： 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>

如何解决使用 iframe 静默令牌刷新期间的“X-Frame-Options：拒绝”问题？

我正在使用静默刷新来更新应用程序中的令牌，这涉及加载指向 Identity Server 端点的 iframe。但是，当 iframe 尝试加载 URL https://

Angular 5：src/app/app.module.ts(24,24)中出现错误：错误TS2307：找不到模块“https”

我在为 Angular 运行“ngserve”时遇到错误。我还看到过一些具有相同消息号的其他问题，但它们适用于 Angular 2、Angular 4.x 等。 我该怎么做才能解决这个问题...

Angular Electron 应用程序中的“new BrowserWindow()”在哪里

我尝试将一些应用程序重写为Electron（使用Angular），但我面临的第一个问题是 - “新的BrowserWindow”功能在哪里？我需要修改这个功能，例如更改“

Angular toSignal 的只读结果作为可写信号

在我的 Angular 服务中，我目前有一个从可观察对象初始化的信号变量 loginById$$ ： 公共loginById$$：Signal = toSignal（this.getLoginById（），{initialValue：{}作为LoginResponse ...

如何专门使用矩区域设置来本地化 ng-bootstrap datepicker？

我在我的 Angular 项目中使用 ng-bootstrap DatePicker。 如果没有为每种语言专门指定 I18N_VALUES 值并利用矩库，我必须将其国际化并且

将布尔值与 true 转换为 Angular4 中的数组（Typescript）

我从我的微服务中获取一组布尔值。 “mon”：正确， “星期二”：假， “结婚”：假， “星期四”：正确， “星期五”：假， “坐”：真实， “太阳”：假， 我需要说服...

如何为垫子凸起按钮添加边框？

下面的代码不起作用。我尝试对没有“mat-raised-button”属性的按钮使用相同的样式，并且它有效，所以我认为这可能是一些问题。 如何添加边框...

有没有办法在 Angular v19 独立组件中禁用延迟加载？

在旧版本的 Angular 中，我们曾经拥有基于模块的应用程序，它会加载一个模块一次，即使您关闭该模块导出的组件 - 它也不会加载该模块......

对结果进行分组时无法对 Angular mat-table 中的数据进行排序

我按照此视频在我的材质表中创建了分组视图，但我无法对结果进行排序。 我想要的是： **年** 春季期间的所有活动 所有活动...

Angular 路由 - 在每次路由更改时获取用户数据

我在使用 Angular Guards 从 API 获取用户信息时遇到问题。我的目标是在本地存储中始终保留最新的用户数据。我想确保获取最新数据...

Typescript 中的角时间比较

在我的角度应用程序中，我需要检查当前时间是否大于下午 3 点。 我使用 Date.now() 获取当前时间，并在构造函数中使用，所以我得到每个

与 <mat-icon>（角度材质）一起使用时我们可以更改 svgicon 颜色吗

所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 这是供参考的代码： 所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 以下是参考代码： <mat-icon svgIcon="menu"></mat-icon> 但是当我尝试时，图标出现了， <mat-icon class="color" svgIcon="menu"></mat-icon> 以及CSS部分 .color:hover, .color:active{ color: black; fill: black; } 这不起作用。 任何帮助将不胜感激，谢谢。 今天早上我自己解决了这个问题，我所做的基本上是用文本编辑器打开 svg 文件，并且在长“Path”属性的末尾有一个填充属性，我只是删除了该部分，现在它工作得很棒。 示例（之前）：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866" fill="#ffffff";/>` 之后：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866"/> 现在一切正常，悬停也正常...非常感谢您仍在研究它。 SVG 图标默认为黑色，除非另有说明，您发布的代码似乎有效，尝试将鼠标悬停时的颜色属性更改为 red 并查看是否可以看到更改。 将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

如何正确更改带角度的垫子图标的颜色？

我查看了文档，并尝试更改垫子图标的颜色，如下所示： 我查看了文档，并尝试更改垫子图标的颜色，如下所示： <mat-icon class="white" color="primary" svgIcon="back"></mat-icon><span class="backText">back</span> 上面是元素在 html 中的样子。我尝试通过添加白色的类来更改图标的颜色。这是行不通的。我尝试添加指令 color="primary" ，但它也不起作用，而我的所有按钮都像这样 <button mat-button color='primary'>example button</button> 收到颜色。我想让我的垫子图标随调色板改变颜色，因为这应该根据文档工作。但最终我还希望能够将图标的颜色更改为白色，这是我的调色板上不存在的颜色。 如何将 <mat-icon> 的颜色更改为工作调色板中的颜色以及调色板上没有的颜色？ 谢谢！ 使用 NgStyle 指令。 <mat-icon [ngStyle]="{'color':'white'}">home</mat-icon> 您有两个选项来更改 mat-icon 的颜色。 颜色属性 您可以使用 color 属性，该属性将使用主题中指定的值。它只接受三个属性："primary"、"accent"或"warn"。 <mat-icon color="primary" svgIcon="archive"></mat-icon> <mat-icon color="accent" svgIcon="archive"></mat-icon> <mat-icon color="warn" svgIcon="archive"></mat-icon> 自定义样式 添加指定了 color 的自定义样式类： .green-icon { color: green; } 为您的图标添加类别： <mat-icon class="green-icon" svgIcon="archive"></mat-icon> 演示 我在 stackblitz 上创建了一个 演示，可以更改 SVG 的颜色 mat-icon。 将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

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，