angular 相关问题

关于Angular的问题（不要与AngularJS混淆），来自Google的Web框架。将此标记用于Angular问题，这些问题并非特定于单个版本。对于较旧的AngularJS（1.x）Web框架，请使用angularjs标记。

Angular 数据表，配置行单击事件时无法单击行按钮

我在项目中使用角度数据表模块，并使用 rowrollback 函数配置了一个函数，以便在单击该行时执行操作。但使用时我无法点击 bu...

javascript angular datatables

回答 3 投票 0

node_modules/@auth0/angular-jwt/lib/jwtoptions.token.d.ts(2,50)中的错误：错误TS2304：找不到名称“未知”

编译我的角度项目时，出现以下错误。我删除了我的node_modules文件并重新安装它仍然不起作用。 node_modules/@auth0/angular-jwt/lib/jwtoptions.token.d.ts 中出现错误...

angular typescript jwt command-line-interface token

回答 2 投票 0

Angular 17 调用 API observable 和订阅时没有任何显示

正在从事 Angular 17 项目，我正在尝试取回有拍卖帕尔马或根本没有拍卖的拍卖。我可以在开发工具响应选项卡中看到数据值返回，但是当我同意时...

javascript angular typescript

回答 1 投票 0

Angular Owl Carousel 不是水平方向而是垂直方向

在我的 Angular 项目中，我在我的 home-component.html 中使用了 Owl Carousel，如下所示：在我的 Angular 项目中，我在我的 home-component.html 中使用了 Owl Carousel，如下所示： <section> <div class="container"> <h1 class="products-title">New Arrivals</h1> <div class="slider"> <owl-carousel-o [options]="customOptions" class="owl-stage"> <ng-template carouselSlide *ngFor="let product of products"> <div class="card"> <div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}"> <img class="product-image" [src]="product.imgSrc" [alt]="product.name"> <h2 class="product-title">{{ product.name | translate}}</h2> <p class="product-description">{{ product.description | translate}}</p> <p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p> </div> </div> </ng-template> </owl-carousel-o> </div> </div> </section> 但是，我的卡片不是水平显示的。但我希望它们是垂直的。即使 display: flex 也没有解决我的问题。另外，当我尝试通过浏览器检查时，<owl-carousel-o></owl-carousel-o\>实际上有猫头鹰阶段的类，我也添加了它，但即使给它一个显示：flex也不起作用。我尝试使包含产品详细信息和图像的卡片实际上是水平的。这是我的应用程序组件.ts import { Component, OnInit } from '@angular/core'; import { ProductService } from './product.service'; import { Product } from './product.model'; import { TranslateService } from '@ngx-translate/core'; import { Renderer2 } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'GreenGrocery'; products: Product[] = []; fruit: any; fruit_title: any; isDarkTheme: boolean = false; // Initialize dark_mode and light_mode with translation keys dark_mode: string = 'assets/img/crescent-moon.png'; light_mode: string = 'assets/img/sunny.png'; constructor(private productService: ProductService, public translate: TranslateService, private renderer: Renderer2) { // Set default language this.translate.setDefaultLang('en'); // Set initial language if needed this.translate.use('en'); translate.addLangs(['en', 'tr']); } ngOnInit(): void { this.products = this.productService.getProducts(); this.isDarkTheme = localStorage.getItem('theme') === "Dark"; this.translate.get('assets/img/crescent-moon.png').subscribe((res: string) => { this.dark_mode = res; }); this.translate.get('assets/img/sunny.png').subscribe((res: string) => { this.light_mode = res; }); this.setBodyBackground(); this.productText(); } switchLanguage(lang: string) { this.translate.use(lang); } ChangeLang(event: any) { const lang = event.target.value; this.switchLanguage(lang); localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.languageBackground(); } storeThemeSelection() { localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.setBodyBackground(); this.productText(); this.footerBackground(); this.cardBackground(); } private setBodyBackground() { const backgroundColor = this.isDarkTheme ? '#3b5b2d' : '#5eda5e'; this.renderer.setStyle(document.body, 'background-color', backgroundColor); } private productText() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private footerBackground() { const footerBackgroundColor = this.isDarkTheme ? '#4d4d4d' : '#ffffff'; this.renderer.setStyle(document.querySelector('.footer'), 'background-color', footerBackgroundColor); } private languageBackground() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private cardBackground() { const cardBackground = this.isDarkTheme ? '#5eda5e' : '#3b5b2d'; const cardContents = document.querySelectorAll('.card-content'); cardContents.forEach(cardContent => { this.renderer.setStyle(cardContent, 'background-color', cardBackground); }); } customOptions: OwlOptions = { loop: true, mouseDrag: false, touchDrag: false, pullDrag: false, dots: true, navSpeed: 700, navText: ['', ''], responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 4 } }, nav: true } } 通常情况下，你不能通过你的组件直接操作其他组件的样式。因此，你的方法应该是这样的：查看别人的组件是否有这样的配置？如果没有请继续关注第二项哈哈哈在这种情况下，我们应该利用我们的超能力，因为你知道超能力需要受到控制。它的名字是ng-deep。 ng-deep 帮助我们操纵任何组件的样式。但是，它可能会影响应用程序中的每个位置。你知道，我们通常不想要这些有风险的事情。一件很棒的事情是将 ng-deep 与 :host 一起使用。 :host 帮助我们将 ng-deep 封装在该组件中。因此，您只需操作该组件的样式以及该组件内部的样式。在你的home.component.css中，你基本上可以像这样更新你的风格： :host { ::ng-deep .owl-stage { display: flex; } .product-image { width: 30%; border-radius: 5px; } .card { width: calc(33.33% - 20px); margin: 10px; } .card-content { padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }

angular typescript owl-carousel

回答 1 投票 0

netlify.toml 和 _redirects 文件不起作用，导致页面找不到角度项目

在 netlify 上部署 Angular 项目时，未从 https://netlify 转换到新域，netlify.toml 和 _redirects 无法按预期工作，并给出 404 页面未找到的错误

angular angularjs deployment netlify

回答 2 投票 0

Spring Security 中的自定义 LoginController 并使用 Angular 发布

我正在尝试创建自己的 LoginController，以便我可以更仔细地观察数据流，但要么是我的 post 方法错误，要么是我的控制器缺少某些内容。每当我尝试发送登录请求时...

java angular rest http spring-restcontroller

回答 1 投票 0

在 Ionic Grid (v7) 中垂直居中卡片

我有两张卡片想要垂直居中。在大屏幕上，卡片应并排位于同一行。行应居中。在小屏幕上，卡片应位于另一张卡片的下方。我尝试...

angular ionic-framework ionic7

回答 1 投票 0

命名路由器位置和路由定义

我在应用程序组件中放置了一个主路由器出口。另外，我已将 router-outlet 命名为放置在当根级别定义的路由之一是时呈现的组件之一......

angular

回答 1 投票 0

ngFor 会触发 Bootstrap 布局中的附加行

我目前正在将我的一个玩具应用程序的前端从 Jinja2 生成的 HTML 代码迁移到 Angular。新旧版本均使用Bootstrap作为CSS/JS框架（同时升级...

angular bootstrap-5

回答 1 投票 0

无法让已部署的 Angular 应用程序在 Azure Web 服务中运行

我关注了此博客，尝试将我的 Angular 应用程序部署到 Azure 应用服务。它似乎有效，构建发生并且推出按预期进行（据我所知）。然而在星星上...

angular azure docker deployment azure-pipelines

回答 1 投票 0

为什么 Angular 17 路由无法识别路由路径中的“大写字母”？

在下面的路由路径中的app-routing.module.ts中：常量路线：路线= [ {路径：''，redirectTo：'home'，pathMatch：'完整'}， {路径：'home'，组件：SelectComponent}， {路径：'我的...

angular routes

回答 1 投票 0

如何在组件代码中声明TemplateRef的实例，以便在标记中多次重用它？

我有几个传递模板的控件。每次出现这样的情况都是相同的，这似乎是避免代码冗余的好主意。我有几个传递模板的控件。每次出现这样的情况都是相同的，这似乎是避免代码冗余的好主意。 <app-lookup [data]="lookupData[0]"> <ng-template let-ctx>{{ctx.name}} ...</ng-template> </app-lookup> ... <app-lookup [data]="lookupData[99]"> <ng-template let-ctx>{{ctx.name}} ...</ng-template> </app-lookup> 我发现一个讨论似乎与我的愿望相关，但检查了链接的小提琴不包含该组件的任何HTML，这让我怀疑它的相关性比最初预期的要少。我想在标记中做这样的事情： <app-lookup *ngFor="index of [1, ..., 99]" [data]="lookupData[index]"> <ng-container [ngTempalteOutput]="template"></ng-container> </app-lookup> ...并提供组件代码中的 template： @ContentChild(TemplateRef) template: TemplateRef<unknown> = ???; ...但我还没有找到一种方法来提供任何对???有用的东西。你不应该用任何东西代替???。 @ContentChild 装饰器将确保 Angular 使用相应的内容子项填充类中的字段。在某些项目中，您可以满足用于明确且干净的模板标记的辅助指令。在你的情况下，它看起来像这样： @Directive({selector: '[lookupContent]'}) class LookupContentDirective{ constructor(public template: TemplateRef) } .... class AppLookupComponent { @ContentChild(LookupContentDirective) content: LookupContentDirective; ... // app-lookup.component.html <div *ngTemplateOutlet="content.template; context: context"></div> ... // usage <app-lookup> <li *lookupContent>li will be a template</li> </app-lookup>

angular ng-template

回答 1 投票 0

使 Angular 组件在类型输入/输出方面变得通用

我有一个查找组件按预期工作。它专门用于获取和过滤用户列表，这些用户在选择后将被设置为成员。设置标题是可配置的，

angular

回答 1 投票 0

如何调整固定宽度表格中的列大小

我有一个固定宽度容器中的表格，并且该表格具有隐藏/显示列的能力。当我显示列时，表格的宽度超过容器的宽度并溢出，从而触发

html css angular typescript

回答 1 投票 0

Webkit 滚动条适用于 Mac，但不适用于 Windows

我使用 -webkit-scrollbar 设计了一个简单的自定义滚动条，它曾经可以工作，但有一天它在某些组件中停止工作（在我的 Windows 机器上）。滚动条按预期工作...