angular 相关问题

Angular 2.0 是否在服务器端存储变量值？

我克隆了官方的 Angular 2.0 快速启动项目并尝试添加侧面导航面板。我创建了一个简单的组件，其中包含以下内容： 导出类 AppComponent { 菜单可见：b...

创建新帖子时如何生成下一个项目ID？

如果在add方法中，我只添加“标题”和“url”，如何生成帖子中的下一个ID？ 方法： addPost(标题:字符串, url:字符串):void { 常量帖子 = { 标题：标题， 你...

我无法将 Angular 应用程序加载为 Electron 应用程序

Angular 是开发 Electron 应用程序的推荐方法（其次是 VUE），这意味着将 Angular 应用程序加载为 Electron 没有什么异常，当然需要使用另一个 tsc...

我的 a 标签链接在我的 Angular 项目的 app.component.html 文件中不起作用

现在我正在处理路线，并且我有一个应该转到特定路径的链接，但由于某种原因它不起作用。当我在网页浏览器的搜索栏中手动输入路径时...

使用 Angular 库中的输入信号

当使用 npm 链接在另一个 Angular 19 应用程序项目（这些是单独的项目）中使用 Angular (19) 库项目时，在构建应用程序时出现以下运行时错误

无法从 Firestore 的 Timestamp 对象获取秒数

我正在 Angular 中使用 Firestore 作为后端创建一个 Todo 应用程序。我对 Firebase 非常陌生，在存储和获取日期时遇到问题。 当我从 firebase 和 console.log 获取日期时...

Firebase 查询子级的子级是否包含值

表的结构为： 聊天 --> 随机ID -->--> 参与者 -->-->--> 0: '名称1' -->-->--> 1: '名称2' -->--> 聊天项目 ETC 我想做的是查询聊天表以找到所有

如何解决 Angular 中 ngx-intl-tel-input 的重复国家代码和自动格式化问题？

我在 Angular 项目中使用 ngx-intl-tel-input 库来处理电话号码输入字段。我已经为电话号码字段创建了一个可重用的组件，并且我正在传递来自...的 FormControl

NestJS 作为使用 SSR 的 Angular 19 的 BFF

Angular 19 对 SSR 的工作方式进行了重大改进。特别是，服务器部分现在在启动 vite dev 服务器时实际使用。这意味着我可以使用快递作为我的reve...

重新路由到子路由未按预期工作

我有 2 个组成部分：索赔摘要和索赔见解。当我位于声明摘要组件中时，URL 将为“/claims-summary/claimId/”。当我从索赔摘要和类别导航时...

Angular *ngFor“id”标签生成与“mat-button-toggle”不正确

我正在尝试从数组生成按钮列表： 我正在尝试从数组生成按钮列表： <div class="card-container"> <mat-button-toggle *ngFor="let button of buttonsFromApi" id={{button.id}} class="problemButton" [disabled]="sso.invalid" >{{button.id}}</mat-button-toggle> </div> buttonsFromApi 包含 5 个对象，例如： { displayName: "Button name", id: "100", } 所以基本上我希望按钮显示 displayName （这有效）并拥有对象中的 id。后者不会发生，而是按钮具有像 100-button 和 200-button 这样的 id，而不是 100 和 200。这是为什么？我怎样才能使 id 为 100 和 200 而不是 100-button 和 200-button？ 如果您想覆盖（或更好地扩展）角度材料的默认按钮 ID，则必须传入 id。 （https://material.angular.io/components/button-toggle/api#MatButtonToggle） <div> <mat-button-toggle id="test-123" value="right" aria-label="Text align right"></mat-button-toggle> </div> 您将在组件内获得您的 id： <mat-button-toggle ... id="test-123"> <button class="mat-button-toggle-button" type="button" id="test-123-button" tabindex="0" aria-pressed="false" aria-label="Text align right"> <div class="mat-button-toggle-label-content"></div> </button> ... </mat-button-toggle> Id 应该用引号括起来 <div *ngFor="let button of buttonsFromApi" id="{{button.id}}"> <mat-button-toggle>{{button.displayName}}</mat-button-toggle> </div> 使用带有方括号的属性绑定： <div *ngFor="let button of buttonsFromApi" [attr.id]="button.id"> “值”属性的评估似乎无法识别“循环变量”，因此您需要使用驱动循环的组件属性（及其索引）： <div *ngFor="let button of buttonsFromApi; let index=index" id="buttonsFromApi[index].id"> <mat-button-toggle>{{button.displayName}}</mat-button-toggle> </div>

使用 Jasmine/Karma 监视 Angular 单元测试中的超类方法

我正在为扩展 DualListComponent 的 Angular 组件类编写单元测试。子类 CustomDualListComponent 有一个 onClickElement 方法，该方法调用几个超类方法

.NET Core 3.0 Web Api 和 Angular 10 应用程序可以托管在同一个 AWS EC2 Ubuntu 实例上吗？

我已在AWS EC2中的端口5000和5001上托管.Net core Web API 3.0（https://localhost:5001和http://localhost:5000） 我还在同一个 AWS 上托管了 Angular(10)（默认端口 4200）应用程序...

无法从拦截器上的 Angular 中的BehaviorSubject 获取值，请参阅下文

common.service.ts 登录服务已创建。 导出类 CommonService { 公共令牌主题：BehaviorSubject； 公共代币：Observable； 构造函数（p...

将本地库链接到 Angular 5 项目

我想要的是在本地拥有一个库，当我更改它时，这些更改会反映在使用该库的项目中。 我在本地机器上查看了这个库：https://

NestJS 作为 Angular 19 的 BFF，使用 SSR 和混合补水

Angular 19 对 SSR 的工作方式进行了重大改进。特别是，服务器部分现在在启动 vite dev 服务器时实际使用。这意味着我可以使用快递作为我的reve...

Angular 19 - 重新路由到子路由未按预期工作

我有 2 个组成部分：索赔摘要和索赔见解。当我位于声明摘要组件中时，URL 将为“/claims-summary/claimId/”。当我从索赔摘要和类别导航时...

重新路由到子路由未按预期工作 - 角度 19

我有 2 个组成部分：索赔摘要和索赔见解。当我在claims-summary组件中时，url将为http://localhost:4200/claims-summary/claimId/。当我从索赔摘要和 cl 导航时...

为 Angular v19 资源 API 创建一个可重用的加载器，具有 2 个不同类型的请求参数

下面是创建 Angular19 可重用资源加载器的代码及其使用单个请求参数的用法： 从“@angular/core”导入{ResourceLoaderParams}； 函数 todoLoa...

路由器与导航路线不匹配

我有一个HTML代码： 我有一个HTML代码： <table mat-table [dataSource]="claims" matSort class="mat-elevation-z8"> <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column"> <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ titleCase(column) }}</th> <td mat-cell *matCellDef="let element"> <!-- Add clickable links for Claim Id --> <ng-container *ngIf="column === 'claimID'; else defaultCell"> <a href="#" (click)="onClaimIdClick(element[column])"> {{ element[column] }} </a> </ng-container> <ng-template #defaultCell> {{ getElementValue(element, column) }} </ng-template> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 它正确加载表格，我已将 click 功能添加到 claimId 列。 TS 代码是： onClaimIdClick(claimId: string): void { console.log('Navigating to:', `/claims-summary/${claimId}`); this.router.navigate(['/claims-summary', claimId]); } 当我点击claimId下的条目时，它会重定向到下一页，但会调用不匹配的路由。这是我的app.routes.ts。 import { Routes } from '@angular/router'; import { LoginComponent } from './components/login/login.component'; import { HomeComponent } from './components/home/home.component'; import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component'; import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component'; import { ClaimsComponent } from './components/claims/claims.component'; export const routes: Routes = [ { path: '', component: LoginComponent }, // Default route for login { path: 'home', component: HomeComponent }, // route for home { path: 'claims', component: ClaimsComponent }, // route for claims { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary { path: 'claims-insights/:type', component: ClaimsInsightsComponent }, { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page) ]; 如果我在新选项卡中打开新网址 http://localhost:4200/claims-summary/claimId，它会完美加载。但是当我尝试通过 onClick 导航到该页面时，它会重定向到 claim-summary，但每次都会调用不匹配的路线。我在这里缺少什么？ 修复标签：防止默认行为： <a (click)="onClaimIdClick(element[column])">{{ element[column] }}</a> 验证路由：确保 this.router.navigate(['/claims-summary', ClaimId]);匹配路线： { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent } 检查标签：确保它位于index.html中： <base href="/" /> 启用路由器跟踪：为了调试，在app.module.ts中添加： RouterModule.forRoot(routes, { enableTracing: true }); 可选：使用 [routerLink] 进行更简单的导航： <a [routerLink]="['/claims-summary', element[column]]">{{ element[column] }}</a> 请检查并lmk是否有效 更新 html 标签： <a href="javascript:void(0)" (click)="onClaimIdClick(element[column])"> {{ element[column] }} </a>