angular 相关问题

我可以设置放大验证器组件的原色吗？

我正在 Angular 中使用放大验证器组件，我想更改颜色。有一个示例显示如何覆盖验证器各个部分的颜色： [数据-a...

我在屏幕上看到过滤后的数据，但是当我清除输入时，原始数据没有出现

我在屏幕上看到过滤后的数据，但是当我清除输入时，原始数据没有出现 这里我将 _todayShare 在 标签中按顺序显示为一个项目 分享 我在屏幕上看到过滤后的数据，但当我清除输入时，原始数据没有出现 这里我将 _todayShare 标签中的 <a\> 按顺序显示为项目 <span>Share</span> <input [(ngModel)]="sharedsearchText" (keyup)="applyFilter(sharedsearchText)" style="width: 50%; margin-top: 1px; margin-bottom: 1px;" matInput placeholder="Ara..." /> </div> <div class="list" slim-scroll [slimScrollOptions]="{ height: 450 }"> <a *ngFor=" let item of _todayShare | keyvalue : valueAscOrder; let i = index " style="cursor: pointer" class="transition" (click)="showliveRss(item)" > _todayShare 是一张地图，正如您所理解的，我在下面复制了它，但它再次不起作用。 _todayShare: Map<string, any> = new Map<string, any>(); ngOnInit() { this._todayShare = new Map<string, any>(); .... applyFilter(value: string) { const filterValue = value.trim().toLowerCase(); const filteredMap = new Map<string, any>(); const _todayShareBackup = new Map<string, any>(this._todayShare) _todayShareBackup.forEach((item, key) => { if (key.toLowerCase().includes(filterValue) || JSON.stringify(item).toLowerCase().includes(filterValue)) { filteredMap.set(key, item); } }); this._todayShare = filteredMap } 当我清除此处的输入时，我希望所有数据如下 这里的问题是 applyFilter 函数，其中 _todayShare 被过滤结果覆盖，当过滤器被清除时，它不会恢复原始数据，您需要在过滤之前备份原始数据，所以当您重新过滤它不适用于之前过滤的数据，而是适用于原始数据。 export class YourComponent implements OnInit { _todayShare: Map<string, any> = new Map<string, any>(); _originalTodayShare: Map<string, any>; // This will store the original data ngOnInit() { this._todayShare = new Map<string, any>(); this._originalTodayShare = new Map<string, any>(this._todayShare); // Load your _todayShare data here and then make a copy to _originalTodayShare } applyFilter(value: string) { if (!value.trim()) { // If there is no input, restore the original data this._todayShare = new Map<string, any>(this._originalTodayShare); return; } const filterValue = value.trim().toLowerCase(); const filteredMap = new Map<string, any>(); this._originalTodayShare.forEach((item, key) => { if (key.toLowerCase().includes(filterValue) || JSON.stringify(item).toLowerCase().includes(filterValue)) { filteredMap.set(key, item); } }); this._todayShare = filteredMap; } }

未检查的运行时最后错误，消息端口在收到响应之前关闭

这个问题是在结合 Spring Boot 运行 Angular 项目时出现的。后端没有错误。但在浏览器中运行的角度部分出现错误是“未检查的运行时。

RXJS 在可能未定义的对象上观察可观察对象

给定两个来源，其中之一可能未定义，我如何组合两者中的最新一个？ const observable1 = 间隔(100); const observable2 = this.ref?.observable; // 这是对 angu 的引用...

Angular 中的跨度中存在间隙，但 AngularJS 中不存在

有 2 个等效的组件模板，其中一个是用 AngularJS 编写的： 有 2 个等效的组件模板，其中一个是用 AngularJS 编写的： <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1" ng-bind="status.message"></span> </span> 新的一个是用现代 Angular 编写的： <span *ngFor="let status of statusList" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> 两者之间的区别在于，在AngularJS中似乎主跨度更大，导致有差距： 而在现代 Angular 中，相同的跨度较小，导致图标之间没有间隙： 生成的html如下（旧的有间隙）： <appeal-status-information status-information="rowData.appealStatusAdditionalInformation" applicant-type="rowData.applicantInfo.applicantType" class="ng-isolate-scope"> <!-- ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Response received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Appeal status: Information received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> </appeal-status-information> 新的没有： <appeal-status-information> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Response received</span> </span> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Appeal status: Information received</span> </span> <!----> </appeal-status-information> 如您所见，样式相同，但结果却不同。 旧角度的跨度较大可能是什么原因？ <ng-container *ngFor="let status of statusList"> <span class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> </ng-container> 对 ng 使用 ng-container，这样在查看页面时不会使用 html 中的任何空间或高度宽度

为什么我的代码生成的边界框总是在原点，而不是在鼠标按下时在光标位置渲染？

我正在尝试在三个js渲染上创建一个边界框缩放，用户可以在其中拖动一个框，然后相机将缩放有界区域。但是，该框未正确生成。 ` ...

在开发 Angular 项目时如何防止表单字段自动填充？

我目前正在使用 Angular 开发一个 Web 应用程序，并且遇到了表单字段自动填充的问题。每当我测试表单时，尤其是在 Chrome 中，浏览器都会自动填充一些

ion-searchbar 与 FormGroup 仅在插入的值为 minLength (3) 时进行搜索

我正在尝试制作一个在插入的值大于或等于3之前不进行搜索的 但我尝试的方法不起作用 :( 主页.html 我正在尝试制作一个在插入的值大于或等于 3 之前不进行搜索的 但是我尝试的方法没有成功 :( 首页.page.html <form [formGroup]="search"> <ion-searchbar formControlName="ionSearch" [debounce]="500" (ionInput)="handleInput($event)" placeholder="Search product"></ion-searchbar> </form> 首页.page.ts ngOnInit() { this.makeForm(); } makeForm() { this.search = new FormGroup({ ionSearch: new FormControl("", Validators.minLength(3)) }); } 你的意思是这样吗？我只是检查长度是否大于或等于三并执行过滤！ handleInput(event) { const query = event.target.value.toLowerCase(); if (query.length >= 3) { this.results = this.data.filter( (d) => d.toLowerCase().indexOf(query) > -1 ); } else { this.results = this.data; } } Stackblitz 演示

Angular16 MongoDB Http Post 上的多个参数

我需要将两个参数与请求一起传递到我的端点，这样每个我的 http post 请求就可以使用三个参数，并且只允许两个参数。我尝试了 HttpParams 但这不起作用...

如何使用新的 CanActivateFn 而不是已弃用的 CanActivate 在 Angular auth Guard 中实现由 auth reducer 管理的状态？

//auth.guard.ts 导出类 AuthGuard 实现 CanActivate { 构造函数（私有存储：Store，私有路由器：Router）{} canActivate(): 可观察...

错误 NG8001：“课程”不是已知元素

我想以此作为序言，我已经阅读了这里无数其他问题，这些问题似乎与我得到的问题相同，但它似乎对我根本不起作用。 我正在使用教程来学习。

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段

我在前端使用 angularjs2 并使用 Java Spring 作为后端 Rest api 并收到错误。 XMLHttpRequest 无法加载“某些 url”。 Access-Control 不允许请求标头字段 appkey...

Angular 不断在 url 中添加页面路由

我用的是角度17 这是我的 app.routes.ts 导出常量路由：路由= [ { 路径：''，pathMatch：'完整'，组件：HomeComponent }， { 路径：'编辑器'，组件：EditorsComponent }， { 路径：'

用Angular切换页面后页码自动重置为1

我不知道为什么当我将页面从1更改为2后，bookParams中的pageNumber会自动重置为1。 导出类 BookListComponent 实现 OnInit { 书籍：书籍[]； bookParams: BookParams; 分页...

如何使用 Ionic、Capacitor 和 Angular 在应用程序关闭后在后台跟踪用户的位置？

我正在尝试使用 Ionic、Capacitor 和 Angular 开发移动应用程序。我想实现一项功能，即使在应用程序关闭后，我也可以在后台跟踪用户的位置。 我有

inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项

我有一个超级简单的 Angular 17 独立项目来测试生成的 typescript-Angular 客户端 sdk。 我的 openapi.json 规范非常基本，位于另一个项目中 我正在链接角度

Angular 材料日期选择器：日期解析 UTC 问题 1 天前

我知道有几个关于此问题的线程，我阅读了所有这些线程，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。 所以和其他用户一样，我也有同样的问题

使用角度 5 设置角度材质 datePicker 的默认值

我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的 .js 代码，我想将其设置为默认值 var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); this.form = this.formBuilder.group({ dataInicial: [data_inicial], ... 这对我有用！ HTML- <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> TS- date1 = new FormControl(new Date()) 您需要为 startAt 更改提供一个 Date 对象，如下所示： 在.ts中： date = new Date((new Date().getTime() - 3888000000)); 在 html 中： <mat-datepicker [startAt]="date" #picker></mat-datepicker> 这里有一个工作演示：https://stackblitz.com/edit/angular-n9yojx 您可以在输入中使用定义的 formControl。 这里是html <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 这里是TS 声明你 formControl date: FormControl; this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>)) 下面是 Angular 10、Angular Material 10 和 Reactive forms 的工作代码 组件.ts this.youForm= this._formBuilder.group({ StartDate: [new Date(), Validators.required], }); component.html 没有变化 <mat-form-field appearance="outline"> <input matInput [matDatepicker]="StartDate" placeholder="Start date *" formControlName="StartDate"> <mat-label>Start Date *</mat-label> <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle> <mat-datepicker #StartDate></mat-datepicker> </mat-form-field> 在一组表单控制器中，您可以使用默认日期，如下所示。 birthdayCtrl: ['1999-01-31'] 使用模板驱动方法，解决方案如下。 selectedDate = new Date(); <input class="form-control" matInput [matDatepicker]="dp3" [min]="today" [max]="max" disabled [(ngModel)]="selectedDate" (ngModelChange)="dateUpdated()" name="currentDate" /> <mat-datepicker-toggle matSuffix [for]="dp3" ></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> ``` 在你的.html中---- <mat-form-field style="width:150px;" color="accent"> <mat-label>Choose From Date</mat-label> <input class="example-events" matInput [matDatepicker]="picker1" [ngModel]="dateF" > <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 ></mat-datepicker> </mat-form-field> 在你的.ts中---- dateF:any=new Date(); ngModel 对我有用... var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date" [ngModel]="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的答案， 在你的.html中 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 在你的.ts中 this.form = this.formBuilder.group({ date: new FormControl(new Date()), // Current Date ... }); 这会将当前日期设置为默认日期。

“.../node_modules/rxjs/Rx”没有导出成员“throwError”

Angular 文档谈到了一个“throwError”类，其导入语句如下所示 从 'rxjs' 导入 { Observable, throwError }; 但我的编译器找不到 cl...

为什么在生命周期钩子中订阅observable会在页面刷新时短时间内显示错误的数据？

我在订阅组件生命周期挂钩中的可观察对象时遇到问题。内容在模板中正确显示。然而通过组件方法改变 DOM 会带来奇怪的结果......