angular 相关问题

Angular - 电子邮件模式验证

用户邮箱： <label for="userEmail">User Email:</label><br /> <input type="email" class="userMobile" id="userEmail" name="userEmail" [(ngModel)]="selectedLocker.lockeruseremail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$"/><br /> 该模式要求电子邮件格式为“[email protected]”或“[email protected]”，但仍然允许提交不带“.com”或“.in”的内容。 对于模板驱动的表单，您应该在提交前使用 form.valid 检查表单是否有效。并应用 [disabled] 属性来阻止按钮提交。 import { ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; @ViewChild('form') form!: NgForm; submit() { if (!this.form.valid) { alert('Form value invalid Detected!') return; } ... } 您可以使用 ngModel 指令显示控件的错误，如下所示： <form #form="ngForm" (submit)="submit()"> <label for="userEmail">User Email:</label><br /> <input type="email" class="userMobile" id="userEmail" name="userEmail" [(ngModel)]="selectedLocker.lockeruseremail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.(com|in)$" #email="ngModel" /><br /> <ng-container *ngIf="email.errors?.pattern"> Invalid email pattern. </ng-container> <button [disabled]="!form.form.valid">Submit</button> </form> 演示@StackBlitz 此电子邮件验证模式有几个问题，请尝试使用此模式： ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

角度 - 材质<mat-option>在测试中不可见

我正在使用 Material 组件开发 Angular 9。我想在垫选择组件中显示一些值。 下面是app.component.html 角度 - 材料 我正在使用 Material 组件开发 Angular 9。我想在 mat-select 组件中显示一些值。 下面是app.component.html <h2> Angular - Material </h2> <mat-form-field> <mat-label>Type</mat-label> <mat-select > <mat-option value="string">Small text</mat-option> <mat-option value="number">Number</mat-option> <mat-option value="date">Date</mat-option> </mat-select> </mat-form-field> <hr> 我的app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'angular-playground'; } 当我使用 ngserve 运行应用程序时，我可以看到包含所有选项的选择框。 但是当我尝试使用 karma ng test 测试此组件时，我在选择框中没有得到任何选项。我尝试检查 HTML DOM，但在 select 中没有看到任何选项标签，并且控制台中没有错误。 app.component.spec.ts import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { MatFormFieldModule } from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, MatFormFieldModule, MatSelectModule ], declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); }); }); 这是一个非常基本的角度应用程序，我有一个只有选择框的简单组件。不知道为什么它在测试中没有显示选项。 下面是我的app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatFormFieldModule } from '@angular/material/form-field'; import {MatSelectModule} from '@angular/material/select'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatFormFieldModule, MatSelectModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 请帮我解决这个问题。 您必须触发 MatSelectComponent 的切换才能显示选项列表，如下所示： const matSelectComponent = fixture.debugElement.query(By.directive(MatSelect)).componentInstance; fixture.detectChanges(); 现在您可以通过以下方式访问您的选项： const matOptionComponent = fixture.debugElement.queryAll(By.directive(MatOption)); 根据我的经验，By.css()或By.directive()方法不能用于访问MatOption元素。相反，可以以稍微不同的方式访问这些选项： const select = fixture.debugElement.queryAll(By.css('mat-select'))[0].componentInstance; const options: MatOption[] = select.options; ...然后，如果需要对选项本身运行测试，您可以测试选项上的方法，例如： options[i].focus(); // i = index, triggerEventHandler('focus') options[i].select(); // triggerEventHandler('select') options[i].deselect(); // triggerEventHandler('deselect') options[i].getLabel(); // triggerEventHandler('getLabel') options[i].toggle(); // triggerEventHandler('toggle') options[i].disabled; options[i].selected; options.length; 所有这些方法都可以在位于 @angular/material/core 的源代码中找到。 （右键单击导入语句中的 MatOption）。

未使用Observable的初始值

我尝试创建一个 HttpWrapper 服务，用带有加载值的包装器来包装返回对象以加载微调器。首先，我用loading: true初始化Observable，但它不起作用。

Angular Mat Paginator：如何防止页面更改或页面大小更改？

看起来 MatPaginator 仅在用户进行此类更改（PageEvent 事件）后才会通知。 还有一种方法可以拒绝页面更改或页面大小的更改吗？ 可能有用...

Angular 根据所选单选按钮显示一些内容

我有两个单选按钮。当我选择“部分付费”时，输入元素 formControlName="paidamount" 将与 我有两个单选按钮。当我选择“部分付费”时，输入元素 formControlName="paidamount" 将与 一起显示在屏幕上 <mat-radio-group aria-label="Select an option" formControlName="fullypaid" [(ngModel)]="fullypaidvalue"> <mat-radio-button value="true" [checked]="true">Fully Paid</mat-radio-button> <mat-radio-button value="false">Partially Paid</mat-radio-button> </mat-radio-group> <p>{{fullypaidvalue}}</p> <div class="formGroup" [class.d-none]="fullypaidvalue"> <label for="paidamount" class="form-label" style="margin-top: 10pt;">Paid Amount</label> <input type="text" class="form-control form-control1" id="paidamount" formControlName="paidamount" placeholder="paidamount" name="paidamount" style="margin-left: 20pt;"> </div> 我的 stackblitz 链接是 https://stackblitz.com/github/reegan2024/mygithubrepo?file=README.md 有人可以帮助我吗 [(ngModel)] 或 formControlName 将单选按钮的值绑定为字符串（“true”或“false”），而不是布尔值（true 或 false）。 您需要将变量设置为字符串：fullpaidvalue: string='true'; 同时将 d-none 类的条件更改为： [class.d-none]="fullpaidvalue == 'true'"

角度材质 mat-select 中多选模式下值必须是数组

我正在使用角形材料垫选择组件。 ...

pdf.js 返回“InvalidPDFException：无效的 Pdf 结构”

我目前有一个后端java服务，可以使用itext将html转换为pdf。 我将 pdf 作为 byte[] 返回给客户端（Angular 5）。 但我最终得到“无效的 pdf 结构...

如何为我的 Angular 17 应用程序生成本地主机 SSL 证书？

我想生成一个本地主机证书，以便在我的 Angular 17 应用程序中使用 SSL。 Angular 通过在开发服务器 (Vite) 中配置 SSL 来提供 SSL： { “ssl”：正确， “ssl密钥...

具有依赖性的角度独立管道

在 Angular 18 中，是否可以有一个使用另一个管道的自定义独立管道？ 这是我正在尝试做的事情： 从“@angular/core”导入{注入，管道，PipeTransform}； 导入 { 货币...

使用APP_INITIALIZER添加动态加载消息

我有一个应用程序，它在初始化之前执行一些后端调用。我有一个加载屏幕，它告诉用户当前正在加载某些内容。问题是我也想展示什么...

如何动态更新与 Angular 中特定类关联的表单字段？

我正在 Angular 中开发一个动态表单，其中表单字段按类别分组，每个组都与一个特定的类相关联（例如 Revenue、Loyer、Epargne）。我正在想办法

ionic Angular 8 获取组件实例

在使用离子和角度创建模态后，我尝试了不同的方法来获取组件实例，但是对我来说没有任何效果。你能帮我理解一下，我怎样才能得到一个组件...

Angular 2 Material 主题指的是 SCSS 中的颜色

我已经根据官方指南创建了一个自定义主题。 @import '../node_modules/@angular/material/core/theming/_all-theme'; @include mat-core(); $primary: mat-palette($mat-teal); $accent: 垫板...

如何测试返回多个操作的效果

我有一个效果，先返回动作A，然后返回动作B @Effect() myEffect$：可观察 = this.actions$ .ofType('MY_ACTION') .switchMap(() => Observable.of( // 订阅者...

如何在另一个 Angular 库项目中使用库项目中的服务，该项目具有像 toastr 这样的依赖关系

我的图书馆项目中有一项服务，它依赖于我的角度项目中的toastr 从 '@angular/core' 导入 { Injectable } ； 从“ngx-toastr”导入{ToastrService}； 导入 {

“Event”类型上不存在属性“clientX”。 Angular2 指令

我正在尝试在 Angular2 指令中监听鼠标的 X 位置，如下所示： @HostListener('mousemove', ['$event']) onMousemove(事件：事件): void { console.log(事件.clientX) } 但是...

如何在组件中实现泛型类？

现在该应用程序包含几个几乎相同的组件。它们基本上都是数据模型的列表视图，带有用于过滤列表的搜索栏。 对于每个组件： 输入是

p-dropdown(primeng) optionDisabled 属性不起作用，无法禁用下拉选项

...

带有模块联合的角度路线

我正在开发一个模块联合项目。 mfe1：ParentApp mfe2：childApp1 mfe3：childApp2 mfe4：childApp3（ChildApp1 的父级） childApp1、childApp3 和 childApp2 都有路由模块......

路由器立即重定向

我有一个路线配置： { 路径：'仪表板'， 组件：UserDashboardPageComponent， 标题：“面板”， 孩子们： [ { 路径：'摘要'， 成分：