angular 相关问题

重新加载后标签消失

我有一个令人沮丧的错误，当我选择一个值来过滤我的垫表中的某些内容时，该表会正确更新，但是当我重新加载页面时，设置值会恢复为默认值（这是可以的）。 ..

如何在 amCharts5 中将日期从“Dec 01”转换为“2024-12-01”？

如何在 amCharts5 中将日期从“Dec 01”转换为“2024-12-01”？ 我正在使用 amCharts 在 Angular 中创建双轴图表。我收到的数据包括格式为“...

以角度裁剪图像

我正在寻找一个Angular插件来裁剪图像然后将其上传到数据库，我已经搜索了一整天，但我找到的所有插件甚至已被弃用或不能满足我的需求...

agular 防护在检查 ngrx 选择器的值之前完成

我有一个守卫，需要在激活路由之前检查 ngrx 选择器中的值。 如果该状态没有值，那么我们需要导航到其他地方。 我这里有两个问题。 首先是...

如何为 Angular 代码编写单元测试用例

我正在尝试为我的角度项目编写测试用例。我使用的是角度版本 16。 下面是我的代码。 在我的代码中，我没有在 m 中获取 component.appRuleList 和 component.appRuleOptions 值...

更新数据图表js Angular

这是我的打字稿代码： 公共 barChartData: ChartConfiguration<'bar'>['data'] = { 标签：['2006'，'2007'，'2008'，'2009'，'2010'，'2011'，'2012']， 数据集：[ { 数据：[ 65, 59, 80...

即使禁用 RenderMode.Server 和 SSG，Angular 19 REQUEST 也是“null”（在服务器运行时）

在 Angular 19 中，有一种从 Angular 应用程序范围访问 Request 对象的新方法，这在 Angular 18 中不可用。 根据文档，如果您遇到以下任何一个，则期望为 null...

在 mat-autocomplete 中使用 `patchValue` 设置值后，下拉选项 `<mat-option>` 未在视觉上被选中

当前行为： 当通过 getProducts 方法内的 patchValue 设置产品表单控件的值时，表单控件会正确更新其值。然而，相应的 当前行为： 当通过 patchValue 方法内的 getProducts 设置产品表单控件的值时，表单控件会正确更新其值。但是，自动完成下拉列表中相应的 <mat-option> 不会在视觉上显示为在组件初始加载时选择的。 预期行为： 加载组件时，与 <mat-option> 设置的值相对应的 patchValue 应在视觉上显示为在自动完成下拉列表中选择。 重现步骤： 打开应用程序并导航至步进器组件。 在步骤 1 中选择用户。 继续执行步骤 2，其中 getProducts 方法使用 productCtrl 以编程方式设置 patchValue 控件的值。 打开产品选择的自动完成下拉列表。 代码片段： <mat-stepper linear #stepper (selectedIndexChange)="selectedStepperIndex.set($event)" > <mat-step [stepControl]="userFormGroup"> <form class="example-form" [formGroup]="userFormGroup"> <ng-template matStepLabel>Step 1</ng-template> @defer (when selectedStepperIndex() === 0; prefetch on idle) { <user [form]="userFormGroup"></user> } <div> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl]="productFormGroup"> <form [formGroup]="productFormGroup"> <ng-template matStepLabel>Step 2</ng-template> @defer (when selectedStepperIndex() === 1; prefetch on idle) { <product [form]="productFormGroup" [selectedUserId]="userFormGroup.controls.userCtrl.value?.id ?? ''" ></product> } <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel>Done</ng-template> <p>You are now done.</p> <div> <button mat-button matStepperPrevious>Back</button> <button mat-button (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-stepper> import { Component, inject, signal } from '@angular/core'; import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl, FormGroup, } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatStepperModule } from '@angular/material/stepper'; import { MatButtonModule } from '@angular/material/button'; import { UserComponent } from 'src/user/user.component'; import { ProductComponent } from 'src/product/product.component'; export interface User { id: string; name: string; } export interface Product { id: string; desc: string; } export interface UserForm { userCtrl: FormControl<User | null>; } export interface ProductForm { productCtrl: FormControl<Product | null>; } @Component({ selector: 'stepper-editable-example', templateUrl: 'stepper-editable-example.html', styleUrl: 'stepper-editable-example.css', imports: [ MatButtonModule, MatStepperModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, UserComponent, ProductComponent, ], }) export class StepperEditableExample { private _formBuilder = inject(FormBuilder); selectedStepperIndex = signal(0); userFormGroup: FormGroup<UserForm> = this._formBuilder.group({ userCtrl: [null as User | null, Validators.required], }); productFormGroup: FormGroup<ProductForm> = this._formBuilder.group({ productCtrl: [null as Product | null, Validators.required], }); } <mat-form-field class="example-full-width"> <mat-label>User</mat-label> <input type="text" placeholder="Pick one" matInput [formControl]="form.controls.userCtrl" [matAutocomplete]="auto" /> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> @for (user of users; track user) { <mat-option [value]="user">{{ user.name }}</mat-option> } </mat-autocomplete> </mat-form-field> import { Component, Input } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { User, UserForm } from 'src/example/stepper-editable-example'; @Component({ selector: 'user', templateUrl: 'user.component.html', styleUrl: 'user.component.css', imports: [ FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, ], }) export class UserComponent { @Input() form: FormGroup<UserForm>; users: User[] = [ { id: '1', name: 'John', }, { id: '2', name: 'David', }, { id: '3', name: 'Smith', }, ]; displayFn(user: User): string { return user ? user.name : ''; } } <div style="display: flex; flex-direction: column;"> <mat-form-field class="example-full-width"> <mat-label>Product</mat-label> <input type="text" placeholder="Pick one" matInput [formControl]="form.controls.productCtrl" [matAutocomplete]="autoProduct" /> <mat-autocomplete #autoProduct="matAutocomplete" [displayWith]="displayProductFn" > @for (product of products; track product) { <mat-option [value]="product">{{ product.desc }}</mat-option> } </mat-autocomplete> </mat-form-field> </div> import { Component, Injectable, Input, OnChanges, OnInit, SimpleChanges, } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { Product, ProductForm, User, } from 'src/example/stepper-editable-example'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject, Observable, of } from 'rxjs'; @Component({ selector: 'product', templateUrl: 'product.component.html', styleUrl: 'product.component.css', imports: [ FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, ], }) export class ProductComponent implements OnInit { @Input() form: FormGroup<ProductForm>; private _selectedUserId: string = ''; private isFirstChange = true; @Input() get selectedUserId(): string { return this._selectedUserId; } set selectedUserId(value: string) { if (this._selectedUserId !== value) { this._selectedUserId = value; if (!this.isFirstChange) { console.log('SETTER INSIDE IF...'); this.onSelectedUserIdChange(); } this.isFirstChange = false; } } products: Product[] = []; constructor(private productService: ProductService) {} ngOnInit() { if (this.selectedUserId) { this.getProducts(); } } displayProductFn(product: Product): string { return product ? product.desc : ''; } getProducts() { this.productService .getProductsService(this.selectedUserId ? this.selectedUserId : '') .subscribe((products) => { this.products = products; this.form.patchValue({ productCtrl: products[1], }); }); } private onSelectedUserIdChange(): void { this.form.controls.productCtrl.setValue(null); this.getProducts(); } } @Injectable({ providedIn: 'root' }) export class ProductService { private sub = new BehaviorSubject<Product[]>([]); private productMap: { [key: string]: Product[] } = { '1': [ { id: '1', desc: 'One', }, { id: '2', desc: 'Two', }, { id: '3', desc: 'Three', }, ], '2': [ { id: '1', desc: 'Four', }, { id: '2', desc: 'Five', }, { id: '3', desc: 'Six', }, ], '3': [ { id: '1', desc: 'Seven', }, { id: '2', desc: 'Eight', }, { id: '3', desc: 'Nine', }, ], }; public observable$: Observable<Product[]> = this.sub.asObservable(); constructor(private httpClient: HttpClient) {} getProductsService(userId: string): Observable<Product[]> { const products = this.productMap[userId] || []; return of(products); // return this.httpClient.get<Product[]>(http://api/${userId}); } } 环境： 角度：18.2.9 角材质：18.2.10 StackBlitz 链接：https://stackblitz.com/edit/zzialkdj-d8rtr2sa 您正在使用 autocomplete 而不是 select。 使用自动完成功能，当选择一个值时，列表应仅显示所选值。这意味着您实现的逻辑不正确，因为您缺少必要的处理，如官方文档所示： filteredOptions: Observable<Product[]>; private _filter(... 如果您想要所描述的行为，您应该考虑使用选择而不是自动完成，因为它更适合您的要求。 <mat-select [formControl]="form.controls.productCtrl"> @for (product of products; track product) { <mat-option [value]="product">{{ product.desc }}</mat-option> } </mat-select>

ng-idle 订阅无法在另一个订阅中工作

我正在使用 @ng-idle/core 包在我的 Angular 2 应用程序中实现空闲超时（当前为 Angular 14）。超过空闲超时后，代码会将用户注销。空闲检测...

`touched` 成员

提克西姆 <div class="container mt-5"> <!-- Form Title --> <h1 class="form-title text-center">Tixsim</h1> <!-- Form Section --> <form [formGroup]="configurationForm" class="form-layout mx-auto" (submit)="onSaveConfiguration()"> <!-- Event Name --> <div class="form-row"> <label for="eventName" class="form-label">Event name:</label> <div class="form-input"> <input type="text" id="eventName" formControlName="eventName" class="form-control" /> <div class="error-message"> <span>&bull; This is an error</span> </div> </div> </div> <!-- Initial Ticket Count --> <div class="form-row"> <label for="initialTicketCount" class="form-label">Initial ticket count:</label> <div class="form-input"> <input type="text" id="initialTicketCount" formControlName="initialTicketCount" class="form-control" /> <div class="error-message" *ngIf="configurationForm.controls?.['initialTicketCount'].touched"> <span *ngIf="configurationForm.controls?.['initialTicketCount'].errors?.['required']">&bull; This is an error</span> </div> </div> </div> <!-- Ticket Release Rate --> <div class="form-row"> <label for="ticketReleaseRate" class="form-label">Ticket release rate:</label> <div class="form-input"> <input type="text" id="ticketReleaseRate" formControlName="ticketReleaseRate" class="form-control" /> <div class="error-message"> <span>&bull; This is an error</span> </div> </div> </div> <!-- Ticket Retrieval Rate --> <div class="form-row"> <label for="ticketRetrievalRate" class="form-label">Ticket retrieval rate:</label> <div class="form-input"> <input type="text" id="ticketRetrievalRate" formControlName="ticketRetrievalRate" class="form-control" /> <div class="error-message"> <span>&bull; This is an error</span> </div> </div> </div> <!-- Max Ticket Capacity --> <div class="form-row"> <label for="maxTicketCapacity" class="form-label">Max ticket capacity:</label> <div class="form-input"> <input type="text" id="maxTicketCapacity" formControlName="maxTicketCapacity" class="form-control" /> <div class="error-message"> <span>&bull; This is an error</span> </div> </div> </div> <!-- Buttons --> <div class="form-buttons"> <button type="submit" class="btn btn-primary">Save and start</button> <button type="button" class="btn btn-secondary">View saved events</button> </div> </form> </div> import { Component } from '@angular/core'; import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; import { HttpClient, HttpClientModule } from '@angular/common/http'; @Component({ selector: 'app-configuration-form', standalone: true, imports: [ FormsModule, ReactiveFormsModule, HttpClientModule // Import HttpClientModule ], templateUrl: './configuration-form.component.html', styleUrls: ['./configuration-form.component.css'] // Fix typo (styleUrl -> styleUrls) }) export class ConfigurationFormComponent { constructor(private http: HttpClient) {} public configurationForm: FormGroup = new FormGroup({ eventName: new FormControl("", [Validators.required]), initialTicketCount: new FormControl(0, [ Validators.required, Validators.pattern('^[1-9][0-9]*$'), Validators.min(1) ]), ticketReleaseRate: new FormControl(0, [ Validators.required, Validators.pattern('^[1-9][0-9]*$'), Validators.min(1) ]), ticketRetrievalRate: new FormControl(0, [ Validators.required, Validators.pattern('^[1-9][0-9]*$'), Validators.min(1) ]), maxTicketCapacity: new FormControl(0, [ Validators.required, Validators.pattern('^[1-9][0-9]*$'), Validators.min(1) ]) }); onSaveConfiguration(): void { const obj = this.configurationForm.value; this.http.post('https://jsonplaceholder.typicode.com/users', obj).subscribe({ next: (res: any) => { alert('User Created'); console.log(res); // Log response for debugging }, error: (error: any) => { console.error('Error occurred:', error); // Handle errors }, complete: () => { console.log('Request completed'); // Optional: Runs when the Observable completes } }); } } 我尝试使用角度创建反应式表单，并尝试使用代码中所示的“touched”来错误处理表单...但它显示为错误... 代码运行时没有任何错误，但没有按预期运行。 （即使我单击并离开文本字段而不输入任何值，跨度也不会出现）。 我还会附上 IDE 的屏幕截图... 也请不要介意我只尝试使用“initialTicketCount”文本字段进行测试的其他表单元素。 非常感谢。 ide 视图中显示错误 1 ide 视图中显示错误 2 我自己找到了这个问题的答案。 我会留下这个问题，因为有人可能会发现它有用 您可以使用 get() 方法来消除错误。 <div class="error-message" *ngIf="configurationForm.get('initialTicketCount')?.touched"> 这解决了错误。

Angular：从资产文件夹中读取所有文件

tltr：我可以从角度访问资产目录吗？ 我在 src/assets/icons 文件夹中有一堆 SVG，我将它们与 mat-icon 一起使用。唯一的缺点是当我添加新图标时，我必须添加 fi...

“模块解析失败：在 Angular 应用程序中使用 pdfjs-dist 时出现意外字符 '#'”

错误信息： 错误：./node_modules/pdfjs-dist/build/pdf.js 1413:9 模块解析失败：意外字符“#”(1413:9) 您可能需要合适的加载器来处理此文件类型，目前没有

Spring Boot 与 Angular 集成

有没有办法让我的后端 Spring Boot 项目与 Angular 前端一起运行，而无需启动单独的 Angular 服务器？我可以将整个应用程序仅部署在后端服务器上吗？

Angular - 在 @if 中使用模板变量

仅当我在 Angular 中将“this.signal().object?.nestedObject”分配给类中的变量时才有效。 类型缩小不起作用 @if(isTypeA(this.signal().object?.nestedObject)) { {{这个....

部署在入口控制器后面的 Angular 应用程序返回无效的 mime 类型

我正在尝试在本地 minikube 集群中的入口控制器后面部署一个角度应用程序。我正在使用内置的 nginx 入口控制器。 当我尝试访问相应的路径时...

在 Angular 中创建 Web 组件/元素不起作用

我目前正在尝试创建一个 Angular 自定义元素/Web 组件并将该 Web 组件集成到我的 ZK 应用程序中。从一个简单的示例开始，我刚刚创建了一个简单的组件，

接收错误错误NullInjectorError：R3InjectorError（独立[_AppComponent]）[markdownEditorConfig - > markdownEditorConfig - > markdownEditorConfig]

我正在研究 Angular cli 18，想要实现 Angular-Markdown-Editor，并且我已按照此链接 https://github.com/ghiscoding/angular-markdown-editor 上的说明进行操作

Angular Material：更改对话框窗口的背景颜色

我不知道为什么，但我的对话框是黑色的（#424242）而不是白色（默认情况下），这对于我的数据表来说是相同的。 覆盖 CSS 不起作用。 有谁知道如何更改背景...

Angular Ngrx 商店和 APP_Initialiser

嗨，我真的正在努力解决一个问题。 我们目前正在使用 nrgx Store 来存储有关客户端应用程序信息的客户端数据。这很好用。 豪...

Angular 7 SSR，应用程序组件 ngOnInit() 多次调用

我有一个 Angular 7 应用程序，包含大约 30 个模块。我正在 app.component.ts 中获取用户详细信息以在整个应用程序中使用它，但我突然注意到用户详细信息 API 运行多个...