angular 相关问题

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

传输状态在 Angular 17 中不起作用,API 从客户端调用

我的项目使用的是 Angular 15 版本,SSR 和传输状态工作正常,并且从服务器端调用 API 但迁移到 Angular 17 后,转移状态不起作用,并且在

回答 1 投票 0

在 for 循环中单击并删除一个项目也会单击另一个项目

将其用作组件时,单击 @for-list 中的第二个按钮会将第二个和第三个按钮的状态更改为 true。当直接使用组件中的按钮时,它可以正常工作:sta...

回答 1 投票 0

如何使用 Angular ssr 从浏览器与express.js 服务器进行通信?

我遇到了一个 SSR 问题,不知何故,Angular 文档和新的 Angular 开发文档都没有提供有关它的信息,或者至少我没有找到任何信息。 我想知道如何从...传输数据

回答 2 投票 0

如何解决vs code中的这个角度误差

应用程序包生成失败。 [0.966 秒] X [错误] NG8001:“app-todos”不是已知元素: 如果“app-todos”是 Angular 组件,则验证它是否包含在“@Component”中。

回答 1 投票 0

Angular Ng2TelInput - 将国家/地区代码/拨号代码存储在变量中

我正在寻找一种将国家/地区拨号代码存储在变量中的方法。有什么办法一样吗。我尝试在 onCountryChange() 方法中实现。但它给出了输出作为事件。我们如何提取...

回答 1 投票 0

警告:无效流:dropzone 上传后来自 springboot API 的 PDF 响应“FormatError: Bad FCHECK in flate flow: 120, 239”

我正在使用 dropzone 将文件发送到 springboot api,该 api 处理这些文件并返回 pdf 响应,我想将其显示在我的角度前端上。一切正常,直到时间结束...

回答 2 投票 0

角度输入范围滑块对十进制数据绑定值进行四舍五入

我在 Angular 的表单中创建了一个范围滑块,用于记录值和显示记录的值。 我在 Angular 的表单中创建了一个范围滑块,用于记录值并显示记录的值。 <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="object.step" [min]="object.minValue" [max]="object.maxValue"> object包含来自数据库的 id、answer、step、min、max 的键值对。 对于以下对象, { id: 1, answer: 4, step: 0.25, minValue: 3, maxValue: 4 } 滑块显示正确的值,即 4。 但是,使用 answer: 3.25 和 answer: 3.75,分别显示 3 和 4。滑块似乎将小数 answer 值四舍五入为最接近的整数。 我在 MDN 查找输入范围,在步骤部分下,有一条注释: 当用户输入的数据不符合步进配置时,用户代理可能会四舍五入到最接近的有效值,当有两个同样接近的选项时,更喜欢正方向的数字。 但是,3.25 或 3.75 不是有效值吗?对于给定的最小值:3、最大值:4 和步长:0.25,两者都可以写为 (min + multiple of step) <= max 我还查找了如何禁用用户代理验证here,并在表单标签中使用了novalidate属性,并且滑块仍然无法正确显示十进制值。但是,它可以正确显示指定范围内的整数值。 编辑1:我尝试检查不同类型的“步骤”值。对于整数步长 (1, 2, 3),小数 > 1 步长 (1.1, 1.5, 2.5),它可以正确显示。小数点似乎无法正确显示< 1 steps (0.5, 0.3). 编辑2:此外,如果我使用 step="0.25" 而不是 [step]="object.step",它会正确显示。因此,静态步骤正在工作,但属性绑定的步骤值无法正常工作,步骤值也是如此 < 1. 实例 我尝试通过少量调整来复制您的场景,并且似乎工作正常。请看看是否对您有帮助。请随意根据您的要求调整 obj 的模型值。 模板: <hello name="{{ name }}"></hello> <p> Start editing to see some magic happen :) <br>Please see the console :) </p> <input [id]="obj.id" type="range" [step]="obj.step" [min]="obj.minValue" [max]="obj.maxValue" [(ngModel)]="obj.answer" (ngModelChange)="valueChanged($event)" > 成分: import { Component, VERSION, OnChanges } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular " + VERSION.major; obj = { id: 1, answer: 0, step: 0.25, minValue: 0, maxValue: 47.8 }; constructor() {} valueChanged(event:any){ console.log(event); console.log(this.obj); } } 我将 $event.target.value 分配给(输入)事件上的 ngModel 变量。

回答 2 投票 0

如何在CDK虚拟滚动角度应用中实现拉动刷新

目前我在 DOM 中使用 CDK 虚拟滚动,但是当快速滚动时 DOM 会出现故障,所以我打算实现 Pull 刷新方法,那么如何实现这个...

回答 1 投票 0

如何在 Angular 应用程序和 Angular 元素之间共享服务

我有一个角度应用程序升级到角度9,我在其中使用角度元素,它也升级到角度9。我有一个服务模块(角度9),我正在我的角度应用程序中导入它。我的

回答 1 投票 0

即使使用 ControlValueAccessor,可重用/共享的 Angular 材质自动完成也会返回 null

我实现了一个共享/可重用的角度材料自动完成,它使用来自服务器的值作为对象返回。我可以将它集成到其他组件中。但是,如果我使用我的组件: &l...

回答 1 投票 0

NullInjectorError:没有 StsConfigLoader 的提供程序! MSAL 角

我有一个角度应用程序,在其中使用 auth0 管理用户,我想更改此配置以使用身份,为此我使用@azure/msal-angular。 我删除了 AuthModule...

回答 1 投票 0

Angular 子路由路由参数

我有一个网址,例如 http://localhost:4200/analysis/portugal/lisbon/demography/population/2022 我创建了路线路径,但出现错误。我的错误在哪里? main.ts:6 ERROR 错误:未捕获(承诺中):

回答 1 投票 0

本地主机在运行我的应用程序Angular应用程序容器后仅显示NGINX欢迎页面

我想对我的 Angular 17 应用程序进行 docker 化。 这是我的 dockerfile # 第 1 阶段:构建 Angular 应用程序 FROM 节点:18.14 AS 构建器 工作目录/应用程序 复制 package.json package-lock.json ./ 运行 npm

回答 1 投票 0

以角度更改国际电话输入字段宽度

我在我的角度应用程序中使用了 Nebular ngx-admin 模板。还使用 ng2-tel-input 进行手机号码输入。 我有以下 HTML 代码 我在我的角度应用程序中使用了Nebular ngx-admin模板。还使用 ng2-tel-input 进行手机号码输入。 我有以下 HTML 代码 <div class="form-control-group"> <label class="label" for="input-mobile">Mobile<span class="text-danger"> *</span></label> <input nbInput type="text" id="input-mobile" class="input-mobile" name="mobile" placeholder="Mobile" fullWidth fieldSize="large" formControlName="mobile" inputmode="numeric" digitOnly [status]="status(formcontrols.mobile)" ng2TelInput [ng2TelInputOptions]="{initialCountry: 'in'}"> </div> 但在构建 Angular 应用程序之后。它看起来像下面的代码。我是通过浏览器里的开发者工具找到的 问题: 无法像上图所示的其他字段那样更改输入字段的宽度。 试过 我已经更改了 iti 类的宽度直接在开发者工具中如下所示 .iti { width:100%; } 运作良好。但我无法像下面这样应用样式文件中的宽度属性 在组件.scss中 .iti { width: 100%; } 它终于对我有用了。我用过以下的, 在组件.scss中 :host ::ng-deep .iti { width: 100%; } 原因 由于 Angular 中的样式封装,因此未应用样式。请参阅此链接了解更多信息。 这对我有用。 我在 component.css 中添加了以下代码 .iti--allow-dropdown { width: 100%; } 我有完全相同的问题,但我在 webflow 上只使用 html 和 CSS,知道如何解决它吗?我尝试了上面的 CSS 代码(使用我的类输入),但不起作用,我被困了几个小时:(

回答 3 投票 0

如何设置ion-option的默认选择值?

我使用的是 Ionic v2,显示页面时无法设置所选值。 我使用的是 Ionic v2,显示页面时无法设置所选值。 <ion-select [(ngModel)]="company.form"> <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option> </ion-select> 我也尝试过使用checked,但这也行不通。我怎样才能做到这一点? Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.3 Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7 Ionic App Scripts Version: 0.0.45 如果处理默认值异或对象,最干净的方法是为 [compareWith] 属性提供比较函数。该函数在参数中接受 2 个对象,如果它们相等则返回 true。这样,模型中的现有值将在开始时被选择。如果在选择之外的模型中添加新数据,这也适用。 以下示例取自官方 Ionic 文档 <ion-item> <ion-label>Employee</ion-label> <ion-select [(ngModel)]="employee" [compareWith]="compareFn"> <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option> </ion-select> </ion-item> compareFn(e1: Employee, e2: Employee): boolean { return e1 && e2 ? e1.id == e2.id : e1 == e2; } 编辑:使用双等号使其适用于 Ionic 4(正如 Stan Kurdziel 在评论中建议的那样) 问题似乎是 ion-option 不喜欢 rc3 中的对象。我必须仅使用对象的 id 部分,并编写一个单独的更改处理程序来查找所需的对象并将其设置为值。 <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem"> <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option> </ion-select> 还有变更处理程序: companyFormSelected(newform) { let selectedForm = this.forms.find((f)=>{ return f.id === newform; }); this.company.form=selectedForm; } 这似乎是 rc3 中的一个错误,但我不知道在哪里可以报告错误。我确实在离子论坛上打开了一个主题。 <ion-select [(ngModel)]="name">// binding the value available from ts file <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name" selected="{{(idx==0).toString()}}">{{form.name}}</ion-option> </ion-select> 在你的 ts 文件中 name = this.forms[0].name //assign the variable name to the first index of your array 这对我有用。 在 HTML 中: <ion-select [(ngModel)]="company.form"> <ion-option value="frm1"> Form 1 </ion-option> <ion-option value="frm2"> Form 2 </ion-option> </ion-select> 在 ts 中: company = { form:null }; constructor(){ this.company.form = "frm1"; } <ion-select ([ngModel])="dropdown1"> <ion-select-option value="1">Item1</ion-select-option> <ion-select-option value="2">Item2</ion-select-option> </ion-select> 以下内容将不起作用: dropdown1 = 2; 但是以下方法会起作用: dropdown1 = 2 + ""; 选择选项值被视为字符串,因此您应该将字符串值分配给模型变量,以便比较不会失败。 您不需要使用选定的属性或[选定],这是没有必要的 <ion-select [(ngModel)]="company.form.id" name="company.form.id"> <ion-option *ngFor="let form of forms" value="{{ form.id }}"> {{ form.name }} </ion-option> </ion-select> 长话短说,并引用离子文档(始终引用原始来源): “选择应该与子元素一起使用。如果子元素没有被赋予 value 属性,那么它的 text 将被用作 value。 如果在 上设置了 value,则将根据该 value 选择所选选项。” ...因此...确保您的 ionic-select 和 ionic-select-option 上的 value 属性在代码中引用相同的 javascript object.attribute...基本上指向相同的东西。 .请参阅下面的 ionic-select 和数组级别 value="{{c.id}}" 中的页面级别属性 value="{{country.id }}" 离子选择选项 请注意,ngModel不再管理页面级别country属性生命周期 <ion-item> <ion-select *ngIf="countries.length > 0" (ionChange)="onCountryChaged($event)" interface="popover" clearInput="true" placeholder='Country (required)' value="{{ country.id }}"> <ion-select-option lines="none" *ngFor="let c of countries" value="{{ c.id }}"> {{ c.label }} </ion-select-option> </ion-select> </ion-item> Inside the .ts file we can now set *country* member programmatically Page:constructor(); this.platform.ready().then(async () => { this.getCountries(); //load list of countries from provider this.country = this.navDataService.getCountry();//local data store to save state between pages }).catch(error => { }); Page:EventHandler onCountryChaged(event): void { let id = event.detail.value; this.country = this.countries.find( item => item.id == id ) ; this.navDataService.setCountry(this.country); } 在离子选项内,你可以做 <ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option> in html----> <ion-item text-center > <ion-select [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" > <ion-option *ngFor="let q of questionArray let i=index" selected="{{(i==defaultSelectQuestion).toString()}}" > {{q}} </ion-option> </ion-select> </ion-item> in ts----> //if u dont want any default selection this.defaultSelectQuestion = -1; //if first element should be your default selection this.defaultSelectQuestion = 0; this.selectedQuestion=this.questionArray[this.defaultSelectQuestion] 角度解决方案: html: <form [formGroup]="formName"> <ion-item> <ion-select label="Label" label-placement="floating" formControlName="formControleName" [value]="" > <ion-select-option *ngFor="let value of values" [value]="value"> {{ item}} </ion-select-option> </ion-select> </ion-item> </form> ts: let values = ["value1", "value2", "value3"] let defaultVlaue = "value2" this.formName = new FormGroup( { formControleName: new FormControl(defaultvalue, [Validators.required]) } )

回答 10 投票 0

在 Slickgrid 中,聚合函数结果未按照 slickgrid 数据内联编辑进行修改/更新

我正在使用 Angular slick grid 版本 4.3.1 来显示我的数据列表。根据配置,聚合函数计算针对列进行,而数据根据字段进行分组。之后如果我

回答 1 投票 0

在 Angular 项目中为 Prettier 设置 Husky 格式预提交挂钩

我正在按照本教程尝试在新的 Angular 项目中为 Prettier 设置 Husky 预提交挂钩。 这也是我想要发生的事情,所以也许我还缺少其他东西......

回答 1 投票 0

Angular - 代理构造陷阱不适用于组件

我正在使用 Angular 17。我有简单的装饰器,它用 Proxy 和简单的 Angular 组件包装目标: 函数 proxyDecorator(目标:任意) { 返回新代理(目标,{ 构造(目标...

回答 1 投票 0

小数点后的零被删除,而 Observable 发出下一个值 Angular

在这里,在这个例子中,一个可观察对象正在发出值。但在控制台输出中,小数点后的零会自动删除。 我想将这些零保留为小数点后的样子。有什么办法可以...

回答 1 投票 0

Angular Material 日期选择器在手动更改并按下选项卡时会更改疯狂的日期

我在这里使用了 Angular 材料日期选择器控件。我的组件有一个奇怪的问题。即当我使用日历控件选择它时就很好。但如果我手动更改日期然后 p...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.