关于Angular的问题（不要与AngularJS混淆），来自Google的Web框架。将此标记用于Angular问题，这些问题并非特定于单个版本。对于较旧的AngularJS（1.x）Web框架，请使用angularjs标记。
我尝试在类中更改动态值，在 React 中这非常容易，但我是 Angular 的新手，我不知道该怎么做。大家可以帮帮我吗T_T 在此处输入图像描述Html 文件包含值（c...
我们有一个基于 Angular 16.x.x 的 FE 应用程序，当我们有一个针对订单 checkout.component 的 http 请求的 Observable 时。我们在订阅的 .next() 中放置了一个 toastr 以及一个
解决 NullInjectorError：Angular 组件中没有 MatDialogRef 的提供程序
我创建了一个 Angular 组件，允许在不使用对话框的情况下创建任务。但是，我还想在对话框中启用任务创建。 当我加载网站时，我遇到了
我正在尝试使用 FormData 上传文件，以便可以通过 HTTP 请求发送。这是我的 HTML 代码 我正在尝试使用 FormData 上传文件，以便可以通过 HTTP 请求发送。这是我的 HTML 代码 <ng-template #displayApp> <div class="display flex justify-content-center"> <div > <p-fileUpload chooseLabel="Select First File" [showUploadButton]="false" [showCancelButton]="false" (onSelect)="checkFilesSelected()" (onRemove)="checkFilesSelected()" #originalFile> </p-fileUpload> </div> <div style="margin: 0 20px;"></div> <div > <p-fileUpload chooseLabel="Select Second File" [showUploadButton]="false" [showCancelButton]="false" (onSelect)="checkFilesSelected()" (onRemove)="checkFilesSelected()" #revisedFile> </p-fileUpload> </div> </div> <div style="margin-bottom: 20px;"> </div> <div class="display flex justify-content-center"> <p-button [disabled]="!areFilesSelected" (click)="onUpload()">Compare Files</p-button> </div> </ng-template> 我正在选择两个文件并尝试在一次调用中上传这两个文件，以便它们彼此同步。 这是我的组件 TS 文件。 @ViewChild('firstFile') firstFile!: FileUpload; @ViewChild('secondFile') secondFile!: FileUpload; onUpload() { console.log("File upload called",); const originalFiles: File = this.originalFile.files[0] const revisedFiles: File[] = this.revisedFile.files; let formData: FormData = new FormData(); console.log("First ",originalFiles, originalFiles.name) debugger; formData.append('First', originalFiles) console.log("Form Data ", formData) let uploadUrl = new URL('baseURL'); uploadUrl.searchParams.append('First',"first"); uploadUrl.searchParams.append('Second',"second"); this.http.post(uploadUrl.toString(), formData).subscribe( response => { console.log('File uploaded successfully:', response); }, error => { console.error('Error uploading file:', error); } ); } 我可以看到 originalFiles 正在填充文件详细信息。但是当我将其附加到 formData 时，它不会被附加，也不会引发任何异常。当我在控制台上看到 formData 时，它是空的。 有这方面的帮助吗？ 我尝试将该数据类型更改为 File 而不是 FileUpload，但结果无论如何都不起作用。如果我们使用 event.Files[0] 那么它就可以很好地附加文件。我不知道如何将此事件合并为单个事件，以便我可以上传文件。 要以角度形式使用表单数据，必须设置 enctype 标头，并且要检查 FormData 中存在的值，条目 method 确实有效。 onUpload() { console.log("File upload called"); const originalFiles: File = this.originalFile.files[0] const revisedFiles: File[] = this.revisedFile.files; let formData: FormData = new FormData(); formData.append('First', originalFiles); // log each entry in the formData for (const [key, value] of formData.entries()) { console.log(`${key}: ${value}`); } let uploadUrl = new URL('baseURL'); uploadUrl.searchParams.append('First', "first"); uploadUrl.searchParams.append('Second', "second"); const headers = new HttpHeaders({ 'enctype': 'multipart/form-data' }); this.http.post(uploadUrl.toString(), formData, { headers: headers }).subscribe( response => { console.log('File uploaded successfully:', response); }, error => { console.error('Error uploading file:', error); } ); }
scss - 不推荐在导入中使用“~” - Angular - vscode
从 Angular 13 开始，使用波形符 (~) 从 node_modules 导入 SCSS 文件 关闭.组件.scss :主机::ng-深{ // 配置 @import“~bootstrap/scss/functions”； @我...
我正在尝试插入编译步骤并修改 AST 以修改 DOM 元素（HTML 模板）的数据属性。 这是在编译时将信息注入到DOM中，而不需要修改...
通过指令组合添加到组件时，Angular 指令 @Input 被忽略
我想我在这里遗漏了一些非常基本的东西，但我已经盯着这个太久了。根据文档和我所看到的其他内容，Angular 指令的 @Input() 将可以在
为什么它告诉我如果所有html元素都有值，则target的value属性不存在？
我正在做一个与API相关的项目，我正在使用Angular、Angular Material、Typescrit和RXJS，错误是在尝试突出显示搜索栏时，在这段html代码中我收到错误...
我们最近刚刚将 Angular 项目从 Angular 1.5 移植到 Angular 11。 部分代码是使用代码和模板中的 gulp-preprocess 和条件语句进行条件编译的（不同部分
如何通过模板outlet动态添加额外的formControl？
所以，我有一个问题，我有一个带有表单的基础组件。但我希望能够向其中添加另一个字段。为什么？因为我有四个页面，结构非常相似，但有所不同......
根据 Angular，SSR 将缓存 HttpClient GET 调用： 启用 SSR 后，HttpClient 响应在服务器上运行时会被缓存。之后，这些信息被序列化并传输...
尽管在 Angular 中可以订阅和使用属性的最新值，但异步管道不会更新视图
考虑下面不起作用的快照： 父.ts allowed$ : 可观察; 父级.html 儿童.ts @Input() 允许：布尔值
如何在 Angular 15 中使用运行时配置，以便我还可以在 AppModule 导入中提供值？
我花了两天时间寻找一种方法来读取资产文件夹中的 config.json 文件。 我尝试在 main.ts 中引导时读取此文件，这样我就可以以某种方式使用我的
我有一些任务取决于健康检查端点。 如果我们在某个网络之外，我需要从后端获得一些响应，或者获得 net::ERR_NAME_NOT_RESOLVED 这个错误。 目前我正在尝试发送请求...
我有一个结构： 测试 内容 我有一个结构： <div> <ul> <li *ngFor="let product of searchResult?.products"> Test <div>Content</div> </li> </ul> </div> 我想在鼠标悬停在 li 上时向 li 内的 div 添加一些样式。我怎样才能做到这一点？使用ViewChild？我不能仅通过 CSS 来做到这一点。我必须获取 li 的位置并在 div 内部应用适当的 offset-top 。 类似的东西https://codepen.io/agop/pen/VwwMGR 但在 Angular 中 没有CSS？ 您可以使用 directive 来修改 css，请参阅： https://angular.io/guide/attribute-directives 和 hostListener 对 mouseover 和 mouseout 执行某些操作 请参阅：在 Angular 指令中使用 CSS 悬停属性？ （抱歉，我在移动设备上，如果您仍然遇到困难，可能会稍后发布代码）！ 您不需要任何脚本。只需使用CSS： scss li:hover > .divClass { ... } html <li *ngFor="let product of searchResult?.products"> Test <div class="divClass">Content</div> </li> 如果您需要一些操作，可以在模板中轻松完成： <li *ngFor="let product of searchResult?.products"> Test <div (mouseover)="addStyle($event)" (mouseout)="removeStyle($event)" >Content</div> </li> 或者您可以使用组件内的 ViewChildren 和 fromEvent 功能进行监听。 为此，您只需使用以下步骤即可。 <div> <ul> <li *ngFor="let product of searchResult?.products; let i = index" (mouseover)="onMouseOverToDropDown(i)" [ngClass]="i === highlightedIndex?hoverClass:''"> Test <div>Content</div> </li> </ul> </div> 并且需要在打字稿中处理“highlightedIndex”。 highlightedIndex: number = 0;//Inside typescript class declaration hoverClass="onhovercss"//Inside typescript class declaration onMouseOverToDropDown(index:number){this.highlightedIndex=index;} 请尝试一下并分享反馈。
在 Angular 6 中，我想从 URL 检索 JWT 令牌，将其转换为 Base 64 并将其推送到其他一些链接。 我这样做了： 应用程序路由.module.ts： { 路径：'admin/：token'，redirectTo：'广告...
我正在尝试设置一个微前端项目，React 将成为 Angular 远程应用程序的主机。 这是 React 和 Angular 的 webpack 配置： Angular（远程）webpack.config.js：...
Angular Material mat-chip 上的文本颜色
我有一个 mat-chip-set 和几个带有自定义产品芯片类的 mat-chip 对象： 我有一个 mat-chip-set 和几个带有自定义 mat-chip 类的 product-chip 对象： <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-set> 我的CSS是： .product-chip { background-color: pink !important; color: white !important; } 结果是芯片背景颜色是我想要的粉红色，但文字颜色仍然是黑色。 如何将 mat-chip 对象的文本颜色设为白色？ 参见 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html 我会编辑使用的变量。 style.css .mat-mdc-standard-chip { --mdc-chip-label-text-color: #fff; } 此外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。 .mat-mdc-standard-chip { --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-label-text-color: #fff; --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; } 示例：https://stackblitz.com/edit/angular-nzhkmg-dk3hsm?file=src%2Fstyles.scss 您可以创建一个指令，将文本和背景颜色作为输入，例如如下： chip-theme.directive.ts： import { Directive, ElementRef, Input, OnInit } from '@angular/core'; type ChipTheme = { backgroundColor: string; color: string; }; @Directive({ selector: '[appChipTheme]', }) export class ChipThemeDirective implements OnInit { @Input('appChipTheme') theme: ChipTheme; constructor(private el: ElementRef) {} ngOnInit(): void { const natEl = this.el.nativeElement; const { color, backgroundColor } = this.theme; // Background Color natEl.style.backgroundColor = backgroundColor; // Text Color natEl.style.setProperty('--mdc-chip-label-text-color', color); } } 然后在 HTML 模板中使用如下： <mat-chip *ngFor="let chip of chips" [appChipTheme]="{ color: chip.color, backgroundColor: chip.bgColor }"> <span>{{ chip.text }}</span> </mat-chip> 不要忘记在 app.module.ts 中导入指令。
我在响应中的nodejs（express）应用程序中设置自定义标头： res.header('Vme','true') 下一个（） 当我收到客户端的响应时，我可以在浏览器中正确地看到标题：