angular 相关问题

在单页应用程序中操作 JavaScript 中的 dom 内容

我需要在 Angular 中的组件标签后面附加包含 p 和 h3 的 div 元素 当将其放入 window.onLoad() 内时 仅在重新加载和刷新时有效

循环内的异步请求

我有一个函数可以根据订单/请求的数据生成报告。内部函数有一个循环来查看要产生的展示总数，然后执行一系列操作。 该项目...

如何根据 Angular 中的表单控件值有条件地渲染 mat-select 中的 multiple 属性？

我的 Angular 应用程序中有一个表单，其中包含一个 mat-select 元素，该元素应该允许根据条件进行多项选择。具体来说，我想有条件地包含多个属性...

为什么我的 Angular 路由器链接会将我带到页面底部？

我使用带有 SSR 和独立版本的 Angular 17，我遇到了组件方面的挑战。我有一个按钮，想要重定向到编辑器。但每次，我都会到达页面底部。 我尝试了很多解决方案...

在 Angular 15 中使用接口迫使我们删除操作链并在模板中抛出错误，错误：对象可能是“未定义”

我分享了界面、ts和html文件。 错误：：对象可能是“未定义”。 88 我分享了界面、ts和html文件。 错误::对象可能是“未定义”。 88 <thead *ngIf="invData?.columns && invData?.columns?.[table] && (invData?.columns?.[table]).length > 0"> Component.html:: <div *ngFor="let table of invData?.tables;trackBy: utilServ.trackByFnIndex"> <table> <thead *ngIf="invData?.columns && invData.columns?.[table] && (invData?.columns?.[table]).length > 0"></thead> </table> </div> 组件.ts:: interface Column {name: string;type: string;id?: number | string;} interface ColumnObj {[key: string]: Column[];} interface InvData {columns?: ColumnObj; tables: string[]} invData: InvData; 界面迫使我删除操作链，但invData.columns可以是undefined。我们无法删除可操作的，因为它在运行时可能是未定义的。 如果我删除操作链，那么它会在 (invData?.columns?.[table]).length 上显示错误，表明该对象可能未定义。 如何检查上面提到的ad的*ngIf条件。 根据我的理解，只需要对链进行一次安全检查?.，这样你就可以简化代码。 <div *ngFor="let table of invData.tables;trackBy: utilServ.trackByFnIndex"> <!-- removed ?. because tables will not be undefined as per the interface! --> <table> <thead *ngIf="invData?.columns?.[table]?.length > 0"></thead> <!-- will safe check the sequence and prevent any undefined errors --> </table> </div>

刷卡功能在产品卡内不起作用

角度 17 的滑动器 尽管它在另一个组件中工作，但在产品卡内不起作用 产品页面.component.html ： 角度 17 的滑动器 虽然在另一个组件中工作，但在产品卡内不起作用 产品页面.component.html： <div class="card-img-container overflow-auto"> <div class="swiper-container myProductSwiper" #swiperContainer> <div class="swiper-wrapper"> <!-- Iterate over each image of the product --> <ng-container *ngFor="let image of product.images"> <div class="swiper-slide"> <div class="product-item"> <img [src]="image" alt="Product Image"> </div> </div> </ng-container> </div> <!-- Pagination and Navigation outside the ngFor loop --> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> 产品页面.component.ts： import { Navigation, Pagination } from 'swiper/modules'; import Swiper from 'swiper'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; export class ProductPageComponent implements OnInit ,AfterViewInit { @ViewChild('swiperContainer') swiperContainer!: ElementRef; swiper: Swiper | undefined; products: Product[] = []; isDealerLoggedIn: boolean = false; faArrowCircleLeft = faArrowCircleLeft; constructor( private productService: ProductService, private productImageService: ProductImageService, private route: ActivatedRoute, private router: Router, // Inject Router service private dialog: MatDialog, private dealerLoginService: DealerLoginService, // Inject DealerLoginService ) { Swiper.use([Navigation, Pagination]); } ngAfterViewInit(): void { console.log('ngAfterViewInit called '); this.initializeSwiper(); } private initializeSwiper(): void { if (this.swiperContainer && this.swiperContainer.nativeElement) { this.swiper = new Swiper(this.swiperContainer.nativeElement, { slidesPerView: 1, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', clickable: true, }, keyboard: { enabled: true, onlyInViewport: true, }, }); } else { console.error('Swiper container not found or not initialized.'); } } 刷卡器应位于卡片 img 容器内。 是的，我添加了 registerSwiperElements();在我的 main.ts 中并添加了模式：[CUSTOM_ELEMENTS_SCHEMA]， Swiper推荐使用swiper-element，这意味着我们有不同的初始化方式，你可以尝试下面的代码吗？ 答案可供参考 完整代码： HTML： <swiper-container slides-per-view="1" speed="500" loop="true" navigation="true" pagination="true" #swiper scrollbar="true" > <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> <swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide> </swiper-container> TS： import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @Component({ selector: 'app-swiper', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './swiper.component.html', }) export class SwiperComponent implements OnInit { constructor() {} ngOnInit() {} ngAfterViewInit() {} } Stackblitz 演示

如何在星云聊天中发送格式化/HTML消息？

我正在使用 Nebular 聊天组件，它运行良好。 但我无法在其中发送 HTML 消息。例如 你好世界 你好世界 您能在星云聊天中帮助实现这一目标吗？ ...

在订阅中捕获 Angular 17 转换为字符串时出错

我无法发现错误。 它正确捕获拦截器中的错误。 拦截器捕获错误 { “标题”：{ “规范化名称”：{}， ”

错误错误：NG04002：无法匹配任何路由。 URL 段：'agregar-producto'

使用角度 在此输入图像描述 这是我正在使用的文件 应用程序组件.ts 从 '@angular/core' 导入 { Component } ； 从 '@angular/router' 导入 { RouterOutlet } ； 导入 {

setTimeout 方法混淆了 Angular 17 应用程序中“this”关键字的范围

我正在尝试实现一个功能与秒表几乎相同的动画。在我的组件中，我有一个如下所示的函数 私人计数（）：无效{ const 当前年份：数字...

importProvidersFrom(Angular 17 独立组件中的[CommonModule]

导出常量appConfig：ApplicationConfig = { 提供者：[ 导入提供者来自（ [ 通用模块 ] ） ] 为什么不能像这样在 app.config.ts 中输入 CommonModule...

有没有办法从 ASP.NET 应用程序调试 Angular 库

Angular 库作为包使用，并用作 Asp.net Web 应用程序中的组件或子功能。 Angular 库组件的选择器用作 .aspx web 中的元素...

星云聊天UI组件

我对聊天 UI 组件样式有问题，如下所示 这是我的代码 我对聊天 UI 组件样式有疑问，如下所示 这是我的代码 <nb-layout> <nb-layout-column> <nb-chat title="Chat APP"> <nb-chat-message *ngFor="let msg of messages" [type]="msg.type" [message]="msg.text" [reply]="msg.reply" [sender]="msg.name" [date]="msg.date" [quote]="msg.quote" [avatar]="msg.avatar"> </nb-chat-message> <nb-chat-form (send)="sendMessage($event)" [dropFiles]="false"> </nb-chat-form> </nb-chat> </nb-layout-column> </nb-layout> chat-room.component.ts 代码 import { Component, OnInit } from '@angular/core'; import { ChatService } from 'src/app/Services/chat.service'; @Component({ selector: 'app-chat-room', templateUrl: './chat-room.component.html', styleUrls: ['./chat-room.component.scss'], }) export class ChatRoomComponent implements OnInit { messages: any[] = []; constructor(protected chatService: ChatService) { this.chatService.getMessage().subscribe((data: any) => { console.log(data); this.messages.push(data); }); } ngOnInit(): void {} sendMessage(event: any) { var payload = { text: event.message, date: new Date(), reply: true, type: 'text', name: 'Jonh Doe', avatar: 'https://i.gifer.com/no.gif', }; this.messages.push(payload); this.chatService.sendMessage(event.message); } } 样式不正确，另一个屏幕只显示圆圈，没有任何文字 我找不到任何解决方案有人可以帮忙吗？ 这是因为您没有将响应推送到 messages[] 堆栈。 const response = await this.chatService.sendMessage(event.message).toPromise(); const botReply = response['reply']; if (botReply) { setTimeout(() => { this.messages.push(botReply); }, 500); }

在 v13 的 angular.json 中替换“deployUrl”的最佳方法是什么？

我目前正在将我的应用程序从 v12 升级到 v13，并注意到弹出此警告： 选项“deployUrl”已弃用：使用“baseHref”选项，“APP_BASE_HREF&qu...

Google Drive API 403/401 错误

我有一个 Angular Firebase 项目。在主屏幕上，我要求用户使用他的 Gmail 帐户登录，代码如下 const 提供者 = new GoogleAuthProvider(); provider.addScope('https://www.

如何使用 .NET Core 3 后端和 OAuth 令牌身份验证在 Angular 10 应用程序中嵌入可编辑 Excel 文件？

标题： 如何使用 .NET Core 3 后端和 OAuth 令牌身份验证在 Angular 10 应用程序中嵌入可编辑 Excel 文件？ 身体： 我正在开发一个 Angular 10 应用程序，需要合并编辑...

ui-grid 第二列可以根据第一列的值来判断是否编辑

在此输入图像描述 1.请求是否需要填写“tax_amount”列，由第一列“tax_type”决定， 例如：tax_type = 1，tax_amount可以编辑， 税_...

放大SSR错误->AuthUserPoolException：Auth UserPool未配置

在启用SSR的情况下运行Angular，在服务器端我们需要令牌来进行API调用，问题是当我们尝试在服务器端使用amplify ssr时，在调用amplify登录方法时，我们得到了...

Promise.all() 永远无法解决

我有一个应该异步获取一些数据的函数。 获取页面事件（）{ const Promise = this.calendarPage.days.map(day => { 返回 this.dataService.getEventsByDay(day) ...

Angular 材质组件不继承类

我使用的是有角度的材质主题，应用了默认的浅色主题，如果 .dark-theme 类位于元素上，则应用深色主题。我遇到了一个问题，虽然有角材料