angular 相关问题

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

我有一个角度服务 connexionService，其中我需要一些 csv 文件，我使用 HttpClient 和在另一个组件中工作的代码，但是当我将 HttpClient 添加到我的构造函数时，网页关联...

javascript angular typescript

回答 1 投票 0

ViewChild 更改检测抛出 ExpressionChangedAfterItHasBeenCheckedError

我有自定义的 Angular 组件模态组件，它充当 MatModalDialog 的代理，并以 ngTemplateOutlet 作为 mat-dialog-content 的主体。我有自定义的 Angular 组件 modal-component，它用作 MatModalDialog 的代理，其中 ngTemplateOutlet 作为 mat-dialog-content 的主体。 <mat-dialog-content class="modal-dialog-medium"> <ng-container *ngIf="dialogData.ngTemplateOutlet" [ngTemplateOutlet]="dialogData.ngTemplateOutlet"></ng-container> </mat-dialog-content> 我还有用于表单的自定义 Angular 组件 form-component - 输入表单和控件的一些配置。这个 form-component 有 getter 方法 valid，它返回 boolean，表明 formGroup 是否有效。提交按钮位于 form-component 外部 - mat-dialog-actions 内部，需要根据表单是否有效来禁用此按钮。这是通过注入的回调来确保的 MAT_DIALOG_DATA //this.matDialog.open(ModalComponent, {data: .... ngTemplateOutlet: this.formTemplate, okButtonDisabled: () => !this.formComponent?.valid  <button-component (click)="dialogData.okButtonAction && dialogData.okButtonAction()" [disabled]="dialogData.okButtonDisabled && dialogData.okButtonDisabled()" [text]="dialogData.okButtonText || 'OK'"></button-component> 正如我所说，modal-component的主体是ngTemplateOutlet，所以我的模板看起来像这样： <ng-template #formTemplate> <form-component *ngIf="formFields" [config]="formConfig" [fields]="formFields" #formComponent (onSubmit)="submit()"></form-component> </ng-template> 参考元素： @ViewChild('formTemplate') formTemplate: TemplateRef<any>; @ViewChild('formComponent') formComponent: FormComponent; 当我调用 this.matDialog.open(...) 时，ngTemplateOutlet 渲染到视图中，并且 FormComponent.valid 返回 false。视图渲染后，FormComponent.formGroup被初始化并且FormComponent.valid变为true。这会在 Expression has changed after it was checked 上触发 [disabled]。这些天我已经遇到过这个错误几次，并且我无数次地研究了更改检测和这个错误，试图找出如何实现一个不会触发此错误的干净解决方案，但我一直无法（我通过在 ngAfterContentChecked 中调用更改检测修复了 2 个类似的错误，但我无法在这里修复它，而且坦白说我不喜欢它）。我错过了什么吗？还是我只是做错了？您可以只使用 static 的 ViewChild 属性，这将在设置为 true 时在更改检测运行之前评估视图子级，并可能消除错误！静态 true 表示在更改检测运行之前解析查询结果， false 表示在更改检测之后解析。默认为 false。 @ViewChild('formTemplate', { static: true }) formTemplate: TemplateRef<any>; @ViewChild('formComponent', { static: true }) formComponent: FormComponent;

angular typescript angular-components angular2-changedetection

回答 1 投票 0

重新加载路由在 Angular Azure 静态 Web 应用程序中返回 404 错误

我已经在azure静态Web应用程序中部署了一个Angular应用程序，但我遇到了一个错误，当我重定向到某些路由时，它返回404错误，但是如果我在Web应用程序中并且我从一个

javascript angular typescript azure-web-app-service

回答 4 投票 0

如何比较两个 JSON 对象 Angular 8 的值

我有两个带有键和值对的对象 obj1 和 obj2，我想比较 obj1 和 obj2 的值，如果两个对象相等，则返回 false，否则返回 true。注意：有些按键丢失了...

javascript angular typescript angular8

回答 1 投票 0

Index.html 未链接到电子角度中的 app.component

我正在尝试将电子添加到现有的角度项目中。我像新应用程序一样添加，我认为我配置正确，但是当我运行我的电子应用程序时，屏幕上没有显示任何内容。这是main.js，...

angular electron angular10

回答 2 投票 0

Angular 17 - 对话框组件未设置样式

首先我是 Angular 新手（1 周经验）问题：我尝试通过对话框编辑待办事项列表中的待办事项。我传入 listItem 的参数，并在对话框中更改标题...

angular angular-material material-dialog

回答 1 投票 0

错误错误：NG0500：在水化过程中 Angular 预期 <html> 但发现 <meta>

运行我的 Angular 17 应用程序时，我会在控制台中收到两个错误，部分错误消息为：错误错误：NG0500：水合过程中 Angular 预期为，但发现为。安...

html angular hydration

回答 1 投票 0

组合两个输入是一个日期对象

我的应用程序中有两个输入，我试图将它们组合在一个对象中（因为服务器期望一个对象）模板：我的应用程序中有两个输入，我试图将它们组合在一个对象中（因为服务器需要一个对象）模板： <ion-item> <mat-form-field> <mat-label>Data Appuntamento</mat-label> <input matInput [matDatepicker]="picker" [(ngModel)]="this.DataPrenotazione" > <mat-hint>DD/MM/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <ion-label>Ora Appuntamento</ion-label> <ngx-timepicker-field [format]="24" [(ngModel)]="this.OraPrenotazione" [minutesGap]="15"></ngx-timepicker-field> </ion-item> 然后我调用它来组合输入： combineDateTime(date: Date, time: Date): Date { const combinedDateTime = new Date(); combinedDateTime.setFullYear(date.getFullYear()); combinedDateTime.setMonth(date.getMonth()); combinedDateTime.setDate(date.getDate()); combinedDateTime.setHours(time.getHours()); combinedDateTime.setMinutes(time.getMinutes()); return combinedDateTime; } 当我尝试调用组合函数时，我得到“.getFullYear() 不是函数” this.combineDateTime(this.DataPrenotazione, this.OraPrenotazione) 我们从时间选择器获得的输出为 02:30，因此我们需要相应地分割它。我们可以对:进行字符串分割，然后使用一元+将分割后的字符串转换为数字，最后设置小时和分钟！ combineDateTime(date: Date, time: string): Date { const combinedDateTime = new Date(); combinedDateTime.setFullYear(date.getFullYear()); combinedDateTime.setMonth(date.getMonth()); combinedDateTime.setDate(date.getDate()); const [hours, minutes] = time.includes(':') ? time.split(':') : [0, 0]; combinedDateTime.setHours(+hours); combinedDateTime.setMinutes(+minutes); return combinedDateTime; } 完整代码： TS： import { Component } from '@angular/core'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { provideNativeDateAdapter } from '@angular/material/core'; import { FormsModule } from '@angular/forms'; import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker'; import { CommonModule } from '@angular/common'; /** @title Basic datepicker */ @Component({ selector: 'datepicker-overview-example', templateUrl: 'datepicker-overview-example.html', standalone: true, providers: [provideNativeDateAdapter()], imports: [ MatFormFieldModule, MatInputModule, MatDatepickerModule, FormsModule, NgxMaterialTimepickerModule, CommonModule, ], }) export class DatepickerOverviewExample { OraPrenotazione: string = '00:00'; DataPrenotazione: Date = new Date(); combinedDateTime: any = null; combineDateTime(date: Date, time: string): Date { const combinedDateTime = new Date(); combinedDateTime.setFullYear(date.getFullYear()); combinedDateTime.setMonth(date.getMonth()); combinedDateTime.setDate(date.getDate()); const [hours, minutes] = time.includes(':') ? time.split(':') : [0, 0]; combinedDateTime.setHours(+hours); combinedDateTime.setMinutes(+minutes); return combinedDateTime; } } HTML： <mat-form-field> <mat-label>Data Appuntamento</mat-label> <input matInput [matDatepicker]="picker" [(ngModel)]="this.DataPrenotazione" /> <mat-hint>DD/MM/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <label>Ora Appuntamento</label> <ngx-timepicker-field [format]="24" [(ngModel)]="this.OraPrenotazione" [minutesGap]="15" ></ngx-timepicker-field> <button (click)="combinedDateTime = combineDateTime(DataPrenotazione, OraPrenotazione)" > combine </button> Final DATE: {{combinedDateTime | date : 'full'}} Stackblitz 演示

angular data-binding

回答 1 投票 0

如何在 Angular 中显示带有时区的日期时间

我在我的角度应用程序中使用以下代码来显示带有时区的日期时间。它显示，2022 年 7 月 22 日 12:36:52 GMT-4 我想动态地将 GMT-4 替换为特定时区，比如 EDT ...

angular date time timezone

回答 2 投票 0

在 ng-template 到 ng-content 之间传递数据（Angular 17）

如何将lists$从list.component传递到ng-template 我提供的代码您可以看到函数调用的管道以及 ng-template 如何传递到 modal.compoent.html。 ................................

angular modal-dialog

回答 1 投票 0

本地主机上的 Angular 17 SSR + SSL 未从 .net core 后端获取数据，因为调用来自邮递员

我真的需要帮助来解决这个问题。我使用此命令在本地主机上运行 Angular npm start “开始”：“ng服务--ssl--ssl-cert％APPDATA％\ ASP.NET \ https \％npm_packag...

angular server-side-rendering

回答 1 投票 0

有没有办法在 ng-multiselect-dropdown 关闭时添加功能？

我正在 Angular 5 中使用 ng-multiselect-dropdown 包来创建多选下拉列表。我想在关闭或隐藏下拉组件时调用函数。像这样关闭Dropd...

javascript angular angular5

回答 6 投票 0

使用角形材料芯片进行电子邮件验证

我正在尝试创建一个带有输入的表单，使用芯片将消息发送到各种电子邮件。我的它几乎可以正常工作，但我不知道当您写入无效时如何正确显示消息错误

html angular typescript forms validation

回答 1 投票 0

TinyMCE 角高度 100% 不起作用

将TinyMCE添加到我的项目中，但无法获得填充页面的高度。这是我的 html 页面，只是一个简单的全屏 div，里面有编辑器：将 TinyMCE 添加到我的项目中，但无法获取填充页面的高度。这是我的 html 页面，只是一个简单的全屏 div，里面有编辑器： <div class="page-layout blank p-24" fusePerfectScrollbar> <editor apiKey="8zpue1x5ae105wdqusojcbzo6vov9mpymvixyf4375qv9mfk" [init]="{ menubar: false, resize: true, height: '100%', min_height: 350, plugins: [ 'advlist autolink lists link image imagetools imagecharmap preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | image' }" ></editor> </div> 但是当它加载时，它开始就像我将高度设置为 0 一样，直到我尝试调整它的大小。使用您的代码，编辑器标签的高度将分配给将在编辑器组件中创建的 iframe。现在，编辑器标签没有采用封闭 div 的高度，因此您看不到您想要的高度。添加样式=“高度：100％；”到编辑器标签，那么它将具有包围 div 的高度，然后 iframe 将具有包围编辑器标签的高度。我似乎无法在您的代码中找到错误，但我建议您不要像以前那样共享您的 api 密钥。该代码适用于我，因此您可以根据需要复制/粘贴和编辑： <editor id="myTextarea" class="editor" apiKey="pasteYourApiKeyHere" [init]="{ width: 600, height: 8000, plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'help' ],}" [(ngModel)]="initialContent" (ngModelChange)="onEditorContentChange()"> </editor> 请注意，您可能不需要 ngModel 或我正在使用的函数。这些服务用于我的特定目的，并且仅包含粘贴当前正在工作的确切代码。根据您的需要删除或修改。

angular tinymce

回答 2 投票 0

错误 TS2769：没有重载与使用来自 RXJS Angular 17 的 scan() 的此调用相匹配

我正在学习 Deborah Kurata 的 Angular RXJS 课程，我遇到了一个类型错误，我无法确定其中一种类型，并且它抛出了一个错误。这是使用 scan() 的操作流...

angular typescript rxjs

回答 1 投票 0

为什么自定义 Angular 库在 npm 上发布后无法编译？

我发布了一个为我工作的团队开发的库。我们的想法是建立一个加速器来创建专用于物联网领域的应用程序。我有一个问题，演示版中的库...

angular npm compiler-errors version publish

回答 1 投票 0

导入 AngularFirestoreModule 时出现问题：“此类型参数可能需要 `extends firebase.firestore.DocumentData` 约束。”

您好，我在将 Firebase (Firestore) 连接到我的 Angular 应用程序时遇到问题。这是我第一次尝试连接 firebase，所以我遵循了 Google 的教程。 https://developers.google.com/