angular 相关问题

按管道角度排序

我想按属性名称对结果进行排序，但以下给出了错误： *ngFor="let s of rslt| order by:wind_park"> 我从后端得到什么： 数据 = [ { 涡轮名称：“

离子角多模态开闭问题

有三个模态关闭自身然后从模态内部打开另一个模态 这是离子模态的结构 有三个模态关闭自身，然后从模态内部打开另一个模态 这是离子模态的结构 <ion-modal id="last-modal" #modal_s [backdropDismiss]="false"> <ng-template> <div class="wrapper"> <ion-item lines="none" class="offer-item ion-no-padding"> <ion-col> <ion-label class="offer-title">{{offer.title[lg]}}</ion-label> </ion-col> <ion-icon (click)="closelastModal('last-modal');" style="color: var(--ion-color-modal-exp)" size="small" name="close-outline" ></ion-icon> </ion-item> <div style=" display: flex; background-color: var(--ion-color-modal-img-background); border-radius: 16px; margin-left: 12px; margin-right: 12px; align-items: center; justify-content: center; padding: 24px; " > <ion-img [src]="offer.img == null || offer.img.length === 0 ? 'assets/images/cofee_cup.png' : offer.img" alt="Coffee Cup" class="custom-card-img" /> </div> <p style=" margin-left: 12px; margin-right: 12px; margin-top: 8px; color: var(--ion-color-modal-description); " > {{offer.text[lg]}} </p> <p class="exp-date"> {{ "OFFERS.EXPIRY" | translate }} {{offer.expirationDate | date : "MMM dd, HH:mm"}} </p> <ion-button expand="block" class="custom-button" (click)="closelastModal('last-modal');modalService.openOfferActionModal($event, offer, 'store')" > <!-- (click)="closeModal();modalService.openOfferActionModal($event, offer, 'store')" --> {{ "OFFERS.REDEEM" | translate }} <ion-icon name="chevron-forward-outline" slot="end"></ion-icon> </ion-button> </div> </ng-template> </ion-modal> and then openAnotherModal(nextModalId: string) { const modalElement = document.getElementById(nextModalId); modalElement?.setAttribute('is-open', 'true'); // Open the next modal } closeAnotherModal(modalId: string) { const modalElement = document.getElementById(modalId); modalElement?.setAttribute('is-open', 'false'); // Close the modal } 这里是三个模态从模态本身的按钮依次打开，现在我想使用关闭按钮关闭自身模态，然后使用另一个按钮关闭自身模态并打开下一个模态。 我的问题是，通过在同时调用时使用此系统关闭和打开功能，那么它会起作用，但对于关闭按钮功能不起作用，但如果我使用 modal_s.dismiss() 它会起作用，但如果一旦调用此功能，那么下一个 openModal 将不起作用应该是解决方案，在离子平台中非常新，请帮助 要实现一个模式自行关闭然后打开另一个模式的系统，同时确保模式关闭和重新打开的正确行为，请按照以下步骤操作： 问题分解 Ionic 模态行为：使用 modal.dismiss() 时，模态将被销毁，除非重新创建，否则无法重新打开。 同时关闭和打开：顺序可能处理不当，导致模态生命周期事件发生冲突。 建议的解决方案： 有效使用 Ionic Modal Controller 的 API 来管理模态生命周期。避免直接操作 DOM 元素，例如 setAttribute。 模板代码 <ion-modal id="last-modal" [is-open]="isLastModalOpen" [backdropDismiss]="false"> <ng-template> <div class="wrapper"> <ion-item lines="none" class="offer-item ion-no-padding"> <ion-col> <ion-label class="offer-title">{{ offer.title[lg] }}</ion-label> </ion-col> <ion-icon (click)="closeModal('last-modal')" style="color: var(--ion-color-modal-exp)" size="small" name="close-outline" ></ion-icon> </ion-item> <div style=" display: flex; background-color: var(--ion-color-modal-img-background); border-radius: 16px; margin-left: 12px; margin-right: 12px; align-items: center; justify-content: center; padding: 24px; " > <ion-img [src]="offer.img == null || offer.img.length === 0 ? 'assets/images/cofee_cup.png' : offer.img" alt="Coffee Cup" class="custom-card-img" /> </div> <p style=" margin-left: 12px; margin-right: 12px; margin-top: 8px; color: var(--ion-color-modal-description); " > {{ offer.text[lg] }} </p> <p class="exp-date"> {{ "OFFERS.EXPIRY" | translate }} {{ offer.expirationDate | date: "MMM dd, HH:mm" }} </p> <ion-button expand="block" class="custom-button" (click)="closeAndOpenNextModal('last-modal', 'next-modal-id')" > {{ "OFFERS.REDEEM" | translate }} <ion-icon name="chevron-forward-outline" slot="end"></ion-icon> </ion-button> </div> </ng-template> </ion-modal> 组件逻辑 import { Component } from '@angular/core'; import { ModalController } from '@ionic/angular'; @Component({ selector: 'app-modal-example', templateUrl: './modal-example.component.html', styleUrls: ['./modal-example.component.scss'], }) export class ModalExampleComponent { isLastModalOpen = false; constructor(private modalController: ModalController) {} // Open a modal async openModal(modalId: string) { const modalElement = document.getElementById(modalId); if (modalElement) { this.isLastModalOpen = true; // Update state } } // Close the current modal async closeModal(modalId: string) { const modalElement = await this.modalController.getTop(); if (modalElement) { await modalElement.dismiss(); this.isLastModalOpen = false; // Update state } } // Close the current modal and open another async closeAndOpenNextModal(currentModalId: string, nextModalId: string) { await this.closeModal(currentModalId); // Close the current modal this.openModal(nextModalId); // Open the next modal } } 解释： [is-open] 属性绑定：使用 Angular 的属性绑定来切换模式可见性，而不是操作 DOM 属性。 Modal Dismissal：使用 Ionic 的 ModalController 的 dimiss 方法来确保正确管理模态生命周期。 顺序关闭和打开：在打开下一个模式之前确保当前模式完全关闭（await）以避免生命周期冲突。

ng（Angular）命令始终切换到文本编辑器

在使用 WSL2（VS code）的 Web 开发项目中断了几个月后，我刷新了所有工具 *npm i -g npm-check-updates，ncu -u，npm install* 我得到了版本@angular/core@...

oidc-client-js 回调后无状态响应

我认为这是与 Angular 5.2.8 和 6 相关的错误。 Angular 5.2.7 一切正常。 我创建了一个 ng5 分支并将 Angular 更新到最新的 5.2.8，然后出现错误！ 有谁可以吗

电容器变量主题未使用

我已从 Cordova 升级到 Capacitor 并使用 Angular。 我的 Variables.scss 文件中的主题没有被使用。 它使用的是 node_modules/@ionic/angular/css/core.css 中的主题。 所以

无法初始化 JavaScript 缓存存储

我在构建 Angular 项目时收到以下警告。下面是配置。 角度 CLI：18.2.12 节点：20.17.0 包管理器：npm 10.8.2 操作系统：win32arm64 角度：18.2.13 ...

AWS Amplify Angular 应用程序 HttpClient.Get 将 CSV 重定向到 index.html

我的 Angular 应用程序托管的 AWS Amplify 正在将对资产文件夹中的 CSV 文件的 HttpClient.get 调用重定向到 index.html 文件。结果是我要解析为CSV的数据实际上是HTM...

如何在 Angular 11.2.0 或更低版本中设置 TailwindCSS

如您所知，Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我怎样才能这样做呢？ 我决定发帖并回答我的...

从角度 5 迁移到角度 19

我正在将旧的 Angular 项目从版本 5 迁移到版本 19。我已经识别了所有兼容和依赖的库，并且能够迁移代码。但是我不断收到独立错误。 该项目...

RxJS Finalize()：将最后发出的值传递给回调

在我的 Angular 服务中，我有一个加载属性，我将其设置为 true 作为获取数据的方法中完成的第一件事。我想在数据下载后将loading设置为false。我是在 fi...

对 ng-select2-component 中选定的项目进行排序

我在 Angular 15 中有一个项目，它使用 ng-select2-component npm 库作为下拉组件（单个和多个）。选定的下拉值本身附加到表单组

Angular 错误 403：预检响应没有 HTTP 正常状态

我有以下发布请求，我试图通过该请求在 Alfresco 社区版本本地服务器上上传 PDF 文件： var urlPost = 'http://127.0.0.1:8080/alfresco/service/api/upload?

从 Web API 后端在 Angular 应用程序中显示图像时获取 HTTP 状态：401

当我尝试在 Angular 19 应用程序中从 ASP.NET Core 8.0 Web API 获取并显示图像时，我在控制台中收到状态代码：401。请阅读下面的案例场景，非常接近...

Angular 19：即使项目被精简到最低限度，生产构建中也会出现 NullInjector 错误

我有 2 个用 Ionic 和 Angular 19 编写的项目，它们在生产环境中而不是在开发版本中给出 Nullinjector 错误。为了找出导致这些问题的原因，我

删除行后如何升级/刷新ag-grid？

我有一个ag网格，我试图在其中删除一行...我可以使用“拼接”技术从数据源中删除该行，之后我想刷新表格。但它显示错误。这是...

zone.js 承诺即使使用 catch 块也会返回未处理的承诺拒绝错误

我正在使用 zone.js 开发一个有角度的环境，因此所有本机 es6 承诺都已被区域感知承诺覆盖。我有两个函数，称为 save() 和 onSaveCb() save() 调用一个有趣的...

如何为 Angular 表达式使用别名？

我正在使用 Angular 7 我有以下模板 {{myService.userInfo.firstName}} {{myService.userInfo.lastName}} 我想通过替换 user 而不是

Angular 19，动态变化的数组的 WriteableSignal

我在服务中有一个可写信号： 私有错误条目：WritableSignal = signal（[]） 我的服务中有一个吸气剂： getErrorEntries()：WritableSigna...

使用界面时出现 TypeScript 错误 2304

在一个角度项目上工作，我创建了一个接口文件，在其中做了两件事： 定义一个接口： 导出接口表头{ 轮数：字符串； teenHoleScore：字符串；

Angular 正在刷新代码更改页面

在 vscode 上，任何角度代码更改都会触发页面刷新，这会重置我当前路线的所有状态，让开发变得如此令人沮丧。我想更改应用程序而不重新加载整个...