angularjs 相关问题

如何以正确的方式在组件中获取角度/谷歌地图参考

我使用@angular/google-maps”：“^17.3.5”和角度“^17.3.5” 我尝试获取我的谷歌地图的参考 我使用 @angular/google-maps": "^17.3.5" 和 Angular "^17.3.5" 我尝试获取我的谷歌地图的参考 <google-map #map mapId="map" height="100%" width="100%" [options]="options"</google-map> 来自我的组件。然而，@ViewChild(GoogleMap) map!: GoogleMap;似乎不起作用。当我尝试在ngAfterViewInit()中使用它时： ngAfterViewInit(): void { this.map.googleMap!.fitBounds({ north: 43.516034, south: 43.423021, east: 5.471529, west: 5.456153, }); } 我得到： ERROR TypeError: Cannot read properties of undefined (reading 'googleMap') 使用 mapInitialized 似乎有效，但是，然后我只得到 google.map.Map 而不是 GoogleMap。我不确定这在某种程度上是否是一个缺点。 <google-map #map (mapInitialized)="initMap($event)" mapId="map" height="100%" width="100%" [options]="options"></google-map>` 组件： map!: google.maps.Map initMap(map: google.maps.Map) { this.map = map; this.initAdvancedMarkers() } async initAdvancedMarkers() { const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; let markers = [ { lat: 43.516034, lng: 5.471529, }, { lat: 43.523021, lng: 5.456153, }, { lat: 43.423021, lng: 5.456153, }, ]; let bounds = new google.maps.LatLngBounds(); // Set markers and fit bounds to show all markers markers.forEach((marker: any) => { new AdvancedMarkerElement({ map: this.map, position: marker }); bounds.extend( new google.maps.LatLng(marker.lat, marker.lng) ); }); this.map.fitBounds(bounds); } 我找不到使用当前版本的谷歌地图执行此操作的正确示例，因此任何正确方向的提示将不胜感激。 问题不可重现，请确保 @if 或 *ngIf 中没有 google 地图元素，这可能会阻止您访问它！ 否则您可以尝试切换静态标志并检查它是否解决您的问题！ @ViewChild(GoogleMap, { static: true }) map!: GoogleMap; // or @ViewChild(GoogleMap, { static: false }) map!: GoogleMap; 工作 stackblitz，其中视图子项正常出现，如下！ 完整代码： import { Component, ViewChild } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { GoogleMap } from '@angular/google-maps'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [GoogleMap], template: ` <!-- google-maps-demo.component.html --> <google-map height="400px" width="750px" [center]="center" [zoom]="zoom" (mapClick)="moveMap($event)" (mapMousemove)="move($event)" /> <div>Latitude: {{display?.lat}}</div> <div>Longitude: {{display?.lng}}</div> `, }) export class App { @ViewChild(GoogleMap, { static: true }) map!: GoogleMap; center: google.maps.LatLngLiteral = { lat: 24, lng: 12 }; zoom = 4; display!: google.maps.LatLngLiteral | undefined; ngAfterViewInit(): void { console.log(this.map); this.map.googleMap!.fitBounds({ north: 43.516034, south: 43.423021, east: 5.471529, west: 5.456153, }); } moveMap(event: google.maps.MapMouseEvent) { this.center = <google.maps.LatLngLiteral>event.latLng?.toJSON(); } move(event: google.maps.MapMouseEvent) { this.display = event.latLng?.toJSON(); } } bootstrapApplication(App); Stackblitz 演示

使用 FormArray 在 Angular 中添加排序

Angular 新手。我有一个输入类 Foo，其中有一个书籍列表，其中 Book 类具有 Id、Title 和 Description 属性。我将其显示在带有输入的表格中，以便用户可以添加、编辑或删除...

我们可以使用扩展运算符来合并数组吗？ [已关闭]

将两个变量 a 和 b 作为两个不同的数组，变量 c 仅在一个数组中显示输出，这意味着该方法将两个或多个数组合并为一个数组 让a=[a,b]; 让...

AngularJS，根据另一个数组当前位置显示数组值

在javascript中，有两个数组，它们的长度相等，但长度是未知的，基于一些db值。例如 colName=['col1','col2','col3']; fieldValue=['abc','def','ghi']; 或者 上校...

Tinymce 指令后 AngularJS 导航不起作用

我有问题我无法弄清楚，但我确实有提示。在集成 TinyMCE 之前，主导航工作正常，例如链接“设置”、“分析”、“设置”；如果您单击它们，它现在不起作用。 ...

更改用户转换顺序时在 Angular 组件中调用 ngOnDestroy 的问题

我在Angular中遇到了这样的问题，由于某种原因，如果用户最初进入组件A页面，然后将其留给组件B页面，组件A继续存活，我会发现

npx cap 同步与 npx cap 复制

我是电容器新手，正在开发一个应用程序，我正在其中更改代码并运行 离子构建 npx 上限副本 npx 帽打开 android 并且还推荐使用npx cap sy...

NullInjectorError：R3InjectorError（环境注入器）[MsalService - > MsalService]：NullInjectorError：没有MsalService的提供者

为什么在我的 Angular 应用程序中集成 MSAL 时会抛出以下错误。 错误 NullInjectorError：R3InjectorError（环境注入器）[MsalService -> MsalService]： NullInjectorError：没有提供...

为什么 Power BI 嵌入式仪表板无法加载

目前正在开发一个加载 Power BI 仪表板的 Angular Web 应用程序（应用程序拥有数据场景）。访问令牌被送入后端，然后带入前端生成...

将 mxCodec 和 mxGraphModel 对象保存到 localStorage

我在 Angular Web 应用程序中使用 mxGraph，它可以在保存 mxGraph 绘图的不同页面之间切换。 显示当前绘图的组件使用 mxGraphModel 和 mxCodec

确保文本框字段中没有放置 JavaScript

我在 UI/表示层（AngularJS）中有很多文本框，文本框的值通过服务器端的有效负载发送到我们的服务器，该有效负载是用 C# 编写的。在

我们如何在角度数组中使用扩展运算符？

将两个变量 a 和 b 作为两个不同的数组，变量 c 仅在一个数组中显示输出，这意味着该方法将两个或多个数组合并为一个数组 让a=[a,b]; 让...

从 AngularJS 迁移到 Angular 提案。这是一条有效的前进道路吗？

我正在与一家拥有 AngularJS 应用程序的公司签约，他们“最终”希望将其迁移到 Angular，但我所在的项目将有很多全新的开发（页面...

当我有角度（1.6）作为依赖项时，无法使用摩卡测试某些内容

我想测试一个 ng-redux 减速器，它具有角度（1.6）作为依赖项。 当我使用 mocha 运行测试（npm test）时，我得到： /data/work/mocha-angularjs/node_modules/angular/angular.js:33343 })(风...

如何在打印 HTML 输出之前在 AngualrJS 标签中进行子字符串化

我是 TypeScript 和 AngularJS 的新手。 以下代码将使用 TypeScript 打印“”列表： {{#if 样式}} 款式 ... 我是 TypeScript 和 AngularJS 的新手。 以下代码将使用 <div> 打印“TypeScript”列表： {{#if styles}} <h2 class="box-header">Styles</h2> <div class="box"> {{#each styles}} <div class="item"> {{#if thumbnail}} <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> {{else}} <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" /> {{/if}} <div class="details"> <h3>{{name}}</h3> <p class="identifier">identifier: {{@key}}</p> </div> </div> {{/each}} </div> {{/if}} 这是identifier行： <p class="identifier">identifier: {{@key}}</p> HTML 中的输出是以下值之一： identifier: base_name identifier: example_000_0_name_1 identifier: example_000_1_name_2 identifier: example_000_2_name_3 identifier: example_000_3_name_4 identifier: example_000_4_name_5 我想在生成 example_000_[n]_ HTML 时删除前缀“identifier”： https://www.geeksforgeeks.org/typescript-string-substring-method/ https://www.geeksforgeeks.org/difference- Between-double-and-single-curly-brace-in-angularjs/ <p class="identifier">identifier: substring({{@key}}, len("example_000_0_"))</p> 预期输出是： identifier: base_name identifier: name_1 identifier: name_2 identifier: name_3 identifier: name_4 identifier: name_5 identifier行不是javascript代码，所以我不知道是否可以在“substring”变量中{{}}。 我尝试过：{{@key.substr(3)}}： Error: Parse error on line 35: ...>identifier: {{@key.substr(3)}}</p> -----------------------^ Expecting 'ID', got 'INVALID' 还尝试过：标识符：{{("" + @key).substr(3)}} Error: Parse error on line 35: ...fier">identifier: {{("" + @key).substr(3 -----------------------^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_SEXPR' 如何substring“{{@key}}”中的“<p class="identifier">identifier: {{@key}}</p>”？ 要在视图元素“内部”运行 javascript，您需要将 javascript 代码放入插值标记中{{here}}。 一种选择是在下划线上使用 Split()，而不是编写需要考虑到数字超过一位数的复杂子字符串。 它看起来像这样： <p class="identifier">identifier: {{@key.split('_')[3]}}_{{@key.split('_')[4]}}</p> 这是一个工作的plunkr

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

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

在 Angular 中打开模态时选择当前浏览器选项卡

我有一个场景，在第一个选项卡中，我设置了一个函数以在 5 秒后显示模式/组件： ngOnInit() { 设置超时（（）=> { this.openDialog(); }, 5000); } 打开对话框（）{ ...

有关角度内按钮范围的混乱

（单击）事件正在触发另一实例中的函数。我不知道如何解释这一点。我附上了一个 stackblitz 示例。 单击两个按钮都会打印相同的内容...

Angular 17 独立应用程序集成 CKEditor 5 -- 错误：窗口未定义

我的 Angular（版本 17.1.2 和独立版本）应用程序无法集成 CKEditor。 我已按照此处的分步指南进行操作。 错误： [vite] 内部服务器错误：窗口未定义 在 r (d:/研究/

触摸事件处理程序覆盖点击处理程序

我正在 AngularJS 中创建一个自定义的可拖动指令。它是 jQuery 事件和普通 JavaScript 的组合。我正在努力使其尽可能通用和可重用，而且它还有......