angular 相关问题

为 Angular 教程设置本地环境

我正在学习 Angular，试图完成 angular.dev 上的“你的第一个 Angular 应用程序”教程：https://angular.dev/tutorials/first-app/01-hello-world。 本教程为您提供 .zip 下载

使用 Angular 17 在选择选项中设置默认值

我可能会被永远投票，但这已经困扰了我几个小时，无法继续下去！ 我想将 Male 设置为默认值。 这是 Angular HTML： 我可能会被永远投票，但这已经困扰了我几个小时，无法继续下去！ 我想将 Male 设置为默认值。 这是 Angular HTML： <select name="gender" id="gender" [(ngModel)]="registration.gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="others">Others</option> </select> 我的.TS文件： export class Registration implements OnInit { public patients = [] as Patient[]; public patient = {} as Patient; public registration = {} as Registration; //registration.gender = 'male'; gender = 'male'; } 我尝试了其他几种方法，但无法将 male 设置为默认选定值！请帮忙。 我们可以使用属性 gender 将值初始化为 male。 import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [FormsModule], template: ` <select name="gender" id="gender" [(ngModel)]="registration.gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="others">Others</option> </select> `, }) export class App { public patients = [] as any[]; public patient = {} as any; public registration = { gender: 'male' } as any; //registration.gender = 'male'; gender = 'male'; } bootstrapApplication(App); Stackblitz 演示

防伪令牌验证再次失败。防伪令牌无法解密

我正在为 .net+Angular 应用程序设置 Antiforgy。 我声明会话设置 builder.Services.AddSession（选项=> { options.IdleTimeout = TimeSpan.FromMinutes(20); options.Cookie.HttpOnly = ...

如果类在模板驱动形式 Angular 4 中无效，为什么类不应用于输入元素？

我的登录页面使用了模板驱动的表单。如果输入元素无效或有任何错误，我希望在输入元素上有一个红色边框，但当...

无法在 Cloudflare Pages 上部署 Angular 项目

我尝试使用 Cloudflare 免费计划从我的 Github 存储库部署我的 Angular 项目。 但失败了。如何才能成功部署？ 关于项目： 该项目不包括 SSR 或 SSG。 我添加了.nvmr...

如何解决pdf文件中的字体编码问题

当我从 acrobat reader 打开它时，我有一个 pdf 文件正确呈现，但是当我尝试在我的 Angular 应用程序中打开相同的 pdf（base 64 编码）时，它显示空白页面。 大多数fi...

在Angular中通用化服务，我想创建一个获取所有HTTP请求的服务是否可行？

我有一个问题，也许你可以帮助我，我在 Angular 17 中有一个服务，我想让该服务获取所有请求，然后，它会进行调整，以便它可以接收所有请求......

Angular 无法检测按钮单击时的属性更改

我正在使用 Angular 17，我有一个菜鸟问题。在我的组件模板中，表格的页脚有几个按钮和一个微调器，它的可见性：在开头隐藏： 我正在使用 Angular 17，我有一个菜鸟问题。在我的组件模板中，表格的页脚有几个按钮和一个微调器，其开头有 visibility: hidden： <ng-container matColumnDef="created_on"> <th mat-header-cell *matHeaderCellDef>Created On</th> <td mat-cell *matCellDef="let row">{{row.created_on}}</td> <td mat-footer-cell ...> <div class="tfooter"> <mat-paginator ... > </mat-paginator> <div class="btn-actions"> <mat-spinner diameter="35" strokeWidth="4" [style.visibility]="isDeleting ? 'show' : 'hidden'" > </mat-spinner> <button ... > Switch DB </button> <button mat-flat-button color="warn" (click)="doStuff()" > Do Stuff </button> </div> </div> </td> </ng-container> 这是组件： @Component({ selector: 'app-change-db', templateUrl: './change-db.component.html', styleUrl: './change-db.component.css' }) export class ChangeDbComponent implements OnInit, AfterViewInit { ... isDeleting: boolean = false ... doStuff() { this.isDeleting = true const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '250px', data: { db: this.getSelectedDb(), answer: false } }); // if the user clicks away from dialog, result will be undefined dialogRef.afterClosed().subscribe((result: DialogData) => { if (result?.answer) { this.isDeleting = true this.mysqlService.dropDb({ dbname: result.db }).subscribe({ next: () => { ... this.isDeleting = false this.loadData() }, error: (err: Error) => { ... this.isDeleting = false } }) } }); } } 如您所见，该组件有一个方法 dropDb()（现在仅用于测试目的）立即将 isDeleting 更改为 true。但是，Angular 更改检测系统似乎未检测到该属性，因为 UI 不显示微调器。 你能给我一些关于我做错了什么的提示吗？谢谢 根据Cee McSharpface的指定，我需要使用visible： <mat-spinner [style.visibility]="isDeleting ? 'visible' : 'hidden'"></mat-spinner> 不确定为什么将 show 与开发者工具一起使用，它的工作原理是相同的，也许 Angular 需要允许的值，并且如果传递任何其他值，则拒绝更新节点。 使用 @ngIf 或 [hidden] 具有从 DOM 中删除节点的效果。使用 visibility，它会停留在那里并占据树中的空间，避免其他元素占据空间（当它不显示时）或在它出现时移动一点。

使用 Angular 的顺风组类问题

当我创建程序时，我尝试使用顺风中的组类功能。令人惊讶的是它不起作用。比我决定一个新程序添加此代码： 当我创建程序时，我尝试使用顺风中的组类功能。令人惊讶的是它不起作用。我决定创建一个新程序并添加此代码： <div class="tw-group tw-p-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg"> <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-group-hover:tw-text-blue-500">Parent Component</h2> <button class="tw-group-hover:tw-bg-blue-500 tw-p-2 tw-bg-blue-300 tw-rounded">Hover me</button> </div> 我在 tailwind.config.js 文件中设置了一个前缀“tw-”。小组课还是不行。比我尝试删除前缀并更改所有以“tw-”开头的类。令我惊讶的是，小组课程功能按预期工作。 有人可以帮我解决这个问题吗？因为我想使用前缀 根据文档： 重要的是要了解此前缀是在任何变体修饰符之后添加的。这意味着具有响应式或状态修饰符（如 sm: 或 hover:）的类仍将具有响应式或状态修饰符 first，您的自定义前缀出现在冒号之后： <div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500"> <!-- --> </div> 因此，根据您的情况，您的 group-hover: 课程应该是 group-hover:tw-text-blue-500 和 group-hover:tw-bg-blue-500: tailwind.config = { prefix: 'tw-', } <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="tw-group tw-p-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg"> <h2 class="tw-text-xl tw-font-bold tw-mb-4 group-hover:tw-text-blue-500">Parent Component</h2> <button class="group-hover:tw-bg-blue-500 tw-p-2 tw-bg-blue-300 tw-rounded">Hover me</button> </div>

Angular 将 Router 注入 CanActivateFn 以在 runInInjectionContext 中使用

我有一个守卫，需要获取异步内容，然后根据该值决定是否需要使用 URLTree 重定向用户。 代码本身非常简单： 导出 const otapGuard：CanActiva...

mergeMap 和 concatMap 链中的角度内存泄漏

我需要将 1 TB 文件夹上传到 Blob 存储，并使用 mergeMap 设计了一个并行处理管道，以使用 concatMap 通过一系列步骤处理和上传文件。每一步都...

从 ViewChild 的别名调用组件类型

所以我的角度项目中有一个index.d.ts 文件。其中我的一个组件有一个别名： 导出声明 const List: typeof ListComponent; 然后我将别名导入到我的其中一个

无法修补 PrimeNG p 编辑器组件的值

我创建了一个使用 p-editor 元素来编写富格式文本的表单，但我遇到了一个问题，编辑器创建并提交富文本，但是当我们想用...更新表单时

如何通过订阅Angular在另一个对象中使用一个对象？

我试图在这里创建两个对象：用户和管理员。我有一个有 id 的用户对象，一个有自己唯一 id idManager 的经理，以及一个来自用户的 id，OneToOne

树：树更新时如何保持打开状态

当我将新数据设置到 this.dataSource.data 时，我需要保持树节点打开/关闭状态。新数据与旧数据非常相同 - 它只是添加/删除了一个或几个最低级别的节点。 我的想法是...

如何自动将 data-testid 添加到 Angular 应用程序的所有 UI 元素

我正在开发一个有数千个 html 文件的 Angular 项目。现在我们正在尝试使用cypress 来实现UI 测试自动化。然而，我们在唯一标识UI方面面临一些困难

在 Angular Storybook 中，如何在控件部分仅显示 @Input() ？

目前在 Angular Storybook 中，它将我的组件中的每个公共事物显示为这样的控件： 我希望它只显示“输入”类别并忽略其他所有内容。有没有哇...

如何在ngOnInit中调用事件方法？

我想知道如何在 ngOnInit 中调用带有事件的方法。下面的代码是我尝试过的，但我收到此错误“未提供事件参数”。即使当我试图把“这个”放进去时。

如何导入独立 Angular 的 fs 节点？

尝试在角度独立中使用 fs 模块时，我不断收到相同的错误消息： TS2307：找不到模块“fs”或其相应的类型声明。 [ng] 7 import * as fs from &quo...

在 cPanel 上发布带有 Angular 17 的 SSR 应用程序是可能的，对吧？

当我使用 ng build 构建 Angular 17 SSR 项目时，我得到以下信息： ├── 区 │ └── 我的项目 │ ├── .DS_Store │ ├── 3rdpartylicenses.txt │ ├── 浏览器 │ │ ├── .DS_Store │ ...