angular 相关问题

如何从下拉表单控件valueChanges中获取完整的项目属性？

我想要的是有关 formControl.valueChanges 使用的一些指导/建议。 当从下拉框中选择一个项目时，我希望能够访问所选项目的完整项目，并且...

Angular：在 AbstractControls 和类之间对齐类型

我尝试过，但无法弄清楚如何定义和对齐类型。例如， 导出接口 IDumpingFormSchema { 请求编号：字符串|无效的; 员工 ID：字符串 |无效的; 员工姓名：...

如何将datetime-local类型的输入控件设置为当前时间

我正在努力将 Angular 中 datetime-local 类型的输入字段的日期和时间设置为当前时间。 下面是我的模板 html 文件的部分。 我正在努力将 Angular 中 datetime-local 类型的输入字段的日期和时间设置为当前时间。 下面是我的模板 html 文件的部分。 <form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="isLoaded && !isAdmin"> <div class="form-row"> <div class="form-group col-5"> <label>Date</label> <input type="datetime-local" formControlName="scheduledDate" class="form-control" /> </div> </div> </form> 我已经尝试了 stackblitz Here 上给出的建议，但它给了我奇怪的错误 ERROR Error: NodeInjector: NOT_FOUND [NgControl] 我不知道角度，但普通的 js 解决方案是 <input type="datetime-local" data-name="dateStart" id="dateTimeStart" const now = new Date(); now.setMinutes(now.getMinutes()-now.getTimeZoneOffset()); document.getElementById('dateTimeStart').value = now.toISOString().slice(0, 16); 我想这可以适用于 Angular！？ 根据 docs，您正在寻找的是一个名为 value 的 HTML 属性，ngModel 也应该可以工作。 <input type="datetime-local" [value]="today"/> @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { today = new Date(); } 您可以在这里找到工作示例 在基本HTML中<input type="datetime-local">你可以添加value属性并将其设置为“今天” <input type="datetime-local" value="today"> 这将使输入在页面加载时呈现今天的日期。

Angular 中内联样式的 [ngStyle] 和 [style] 之间的区别

在 Angular 中使用 [ngStyle] 和 [style.] 进行内联样式组件有什么区别？

`[ngStyle]` 与 Angular 中内联样式的 `[style]`

在 Angular 中使用 [ngStyle] 和 [style.] 进行内联样式组件有什么区别？

ViewChild 和 focus()

我有一个组件，其中包含默认隐藏的文本区域： 编辑 <question vote="12"> <p>我有一个包含默认隐藏文本区域的组件：</p> <pre><code><div class="action ui-g-2" (click)="toggleEditable()">edit</div> <textarea [hidden]="!whyModel.inEdition" #myname id="textBox_{{whyModel.id}}" pInputTextarea focus="true" [(ngModel)]="whyModel.description"></textarea> </code></pre> <p>当我单击“编辑”div 时，我想显示文本区域并将焦点放在它上面：</p> <pre><code>@ViewChild('myname') input: ElementRef; ... private toggleEditable(): void { this.whyModel.toggleEditable(); this.input.nativeElement.focus(); } </code></pre> <p>“显示”部分有效，但焦点部分无效。我想念什么？</p> </question> <answer tick="false" vote="17"> <p>绑定仅在更改检测运行时更新，这通常是在事件处理程序完成之后。这对于您的用例来说已经太晚了，因为事件处理程序本身已经依赖于更改检测的效果。</p> <p>您可以通过调用 <pre><code>detectChanges()</code></pre></p> 立即（同步）强制执行更改检测 <pre><code>constructor(private cdRef:ChangeDetectorRef) {} @ViewChild('myname') input: ElementRef; ... private toggleEditable(): void { this.whyModel.toggleEditable(); this.cdRef.detectChanges(); this.input.nativeElement.focus(); } </code></pre> </answer> <answer tick="false" vote="3"> <p>您还可以使用 AfterViewCheck“强制”焦点。我出于演示目的简化了您的代码：</p> <p><strong>打字稿：</strong></p> <pre><code> editable; @ViewChild('myname') input: ElementRef; private toggleEditable(): void { this.editable = !this.editable; } ngAfterViewChecked(){ if(this.editable){ this.input.nativeElement.focus(); } } </code></pre> <p><strong>HTML</strong></p> <pre><code><div class="action ui-g-2" (click)="toggleEditable()">edit</div> <br> <textarea [hidden]="!editable" #myname id="textBox_{{id}}" pInputTextarea focus="true" [(ngModel)]="description"></textarea> </code></pre> <p><strong><a href="https://stackblitz.com/edit/angular-9ytz4d?file=app%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz 示例</a></strong></p> </answer> <answer tick="false" vote="0"> <p>您可以使用 <pre><code>@ViewChild</code></pre> 和 <pre><code>focus()</code></pre> 来关注特定元素。 可以这样使用：</p> <p>在 HTML 文件 (abc.component.html) 中</p> <pre><code><form #data="ngForm"> <input class="text-field" type="text" name="name" > <input class="text-field" type="text" name="surname"> <input class="text-field" type="text" name="company"> </form> <button type="submit" value="Submit" (click)="submitData(data.value)">Submit</button> <input class="text-field" type="text" name="City" #setFocusField> <input class="text-field" type="text" name="State"> </code></pre> <p>在 TypeScript 文件 (abc.component.ts) 中</p> <pre><code>@ViewChild('setFocusField') setFocusField: any; submitData(data:any){ this.setFocusField.focus(); } </code></pre> <p>当您点击提交按钮时，焦点将被设置到“城市”字段。 </p> <p><strong>实现此目的的另一种方法：</strong></p> <p>在上面的代码中，我们可以使用 <pre><code>any</code></pre> 来代替 <pre><code>ViewChild</code></pre> 字段上的 <pre><code>ElementRef</code></pre>。</p> <p>在这种情况下，打字稿文件更改将如下：</p> <p>(abc.component.ts)</p> <pre><code>@ViewChild('setFocusField') setFocusField: ElementRef; submitData(data:any){ this.setFocusField.nativeElement.focus(); } </code></pre> </answer> <answer tick="false" vote="0"> <p>如果您尝试专注于自定义 Angular 组件（例如模态/对话框实现），您可能需要向其添加 <pre><code>tabIndex</code></pre>：</p> <p>您可以直接在模板中执行此操作。例如：</p> <pre><code><div class="my-component-wrapper" tabIndex="0">...</div> </code></pre> <p>或者通过组件 Typescript 代码中的 <pre><code>@ViewChild</code></pre>。例如：</p> <pre><code>... @ViewChild("myComponent") myComponent: ElementRef; ... ngAfterViewInit()() { this.myComponent.nativeElement.tabIndex = "0"; this.myComponent.nativeElement.focus(); } </code></pre> <p>希望这对某人有帮助！</p> </answer> </body></html>

如何使用 Angular 中的 Keycloak 检索代码验证器

我正在尝试开发一个以 Angular 作为前端、Java 作为后端的应用程序。 我需要通过Keycloak登录，然后将收到的代码发送到后面，生成令牌并将其存储在

错误类型错误：无法读取未定义的属性（读取“imageUrl”）角度材料

当我写下这行html代码时： 控制台抛出以下错误： 错误类型Er...

如何将 Shopify 按钮添加到我的 Angular 16 应用程序

我有一个 angular16 应用程序。我的客户有一家 Shopify 商店，他希望网站上有一个“立即订购”按钮，可以转到 Shopify 商店。他用 S 上的代码生成了这些按钮...

角度信号未触发模板中的更改

@组件（{ 选择器：'app-onb'， 独立：真实， 进口：[]， templateUrl: './onb.component.html', }) 导出类 OnbComponent 实现 OnDestroy { 收到的数据：任意； onb响应 =

Spring 中带后端的 Angular 登录表单

我正在使用后端 Java Spring 创建简单的角度应用程序。 这是两个独立的项目。 我将在 Angular 中创建登录表单。我在网上看到很多教程 基本正品在哪里...

在 i18n SSR Angular 19 应用程序中设置 LOCALE_ID 的最佳方法是什么？

在 i18n SSR Angular 19 应用程序中设置 LOCALE_ID 的最佳方法是什么？ 我可以通过设置此 DI 令牌在服务器 (app.server.config.ts) 上设置它： { 提供：LOCALE_ID， 使用工厂：...

Angular：属性未正确传递

我有一个带有布尔属性的组件，默认值为 true 当我尝试将它的属性显式设置为 false 时，它仍然会获得 true 值。 选择.组件.ts： @成分（{

Primeng p-multiSelect 搜索功能不起作用

我正在与 PrimeNg 合作来过滤我的 p 表上的列。 我将 p-multiSelect 嵌套在 p-ColumnFilter 内。 过滤按预期工作，但是 p-multiSe 内的搜索功能...

错误：预计没有打开的请求，发现 1

当我尝试执行 HTTP 单元测试用例时，出现此错误。 我正在使用 Angular 5。我该如何解决这个问题？ 下面是我的正常 GET 代码。下面的代码只是带来普通的 GET。 导入 { TestBe...

如何通过直接 URI 访问来限制对 Angular/NGINX 服务器中的静态文件的访问

我们在 NGINX 服务器上部署了一个 Angular 应用程序。在资产文件夹中，我有一个名为configuration的子文件夹，其中包含一个名为configuration.json的文件。 我们加载此配置。

systemjs-builder 与 angular2。找不到模块？

我已经使用systemjs创建了我的应用程序......一切正常。 现在我想创建一个捆绑文件，但由于某种原因，我的应用程序将我的模块作为单独的 http 请求请求...

Telegram 登录小部件出现 Angular iframe 错误

我正在为我的 Angular 网站添加电报登录支持，例如 thi 导出类 TelegramLoginWidgetComponent 实现 AfterContentInit { @ViewChild('script', {static: true}) 脚本：ElementRef;...

将服务注入到模型中是一件好事吗？

所以， 我正在致力于创建自定义 MatTableDataSource。 目标是使用自定义过滤器/排序并直接与自定义类集成**。** 我遇到了一个问题：我需要打电话给

关闭 eventClick 功能 fullcalendar 上的弹出窗口

您好，我正在使用最新版本的 fullcalendar，我想关闭此弹出窗口： https://fullcalendar.io/docs/event-popover 当我调用 eventClick 函数时： https://fullcalendar.io/docs/eventClick