登录
当前位置： 首页 > 知识库问答 >
问题：

不能绑定到“纬度”,因为它不是一个已知的公关

翟缪文
2023-03-14

我正在尝试将AGM Angular谷歌地图(https://github.com/SebastianM/angular-google-maps)添加到我的Angular4项目中

指南是:https://github.com/SebastianM/angu

当我访问带有agm组件的页面时遇到的错误：

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->

                    <agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->

                    <agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->

                    [ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
Error: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("th:100%;height:auto;" src="/assets/common/images/live-demo.png">-->

                    <agm-map [ERROR ->][latitude]="lat" [longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat" [longit"): ng:///MainModule/SiteMapComponent.html@22:29
Can't bind to 'longitude' since it isn't a known property of 'agm-map'.
1. If 'agm-map' is an Angular component and it has 'longitude' input, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("to;" src="/assets/common/images/live-demo.png">-->

                    <agm-map [latitude]="lat" [ERROR ->][longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat" [longitude]="lng"></agm-"): ng:///MainModule/SiteMapComponent.html@22:46
'agm-map' is not a known element:
1. If 'agm-map' is an Angular component, then verify that it is part of this module.
2. If 'agm-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tyle="width:100%;height:auto;" src="/assets/common/images/live-demo.png">-->

                    [ERROR ->]<agm-map [latitude]="lat" [longitude]="lng">
                    <!--<agm-map-marker [latitude]="lat"): ng:///MainModule/SiteMapComponent.html@22:20
    at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
    at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
    at Set.forEach (native) [angular]
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
    at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
    at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
    at syntaxError (http://localhost:4200/vendor.bundle.js:107191:34) [angular]
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:117682:19) [angular]
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:131433:39) [angular]
    at http://localhost:4200/vendor.bundle.js:131357:62 [angular]
    at Set.forEach (native) [angular]
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:131357:19) [angular]
    at createResult (http://localhost:4200/vendor.bundle.js:131242:19) [angular]
    at Object.onInvoke (http://localhost:4200/vendor.bundle.js:4535:37) [angular]
    at http://localhost:4200/polyfills.bundle.js:5617:57 [angular]
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:5569:31) [angular]
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:5540:17) [angular]
    at http://localhost:4200/polyfills.bundle.js:5617:17 [angular]
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4526:37) [angular]
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:5450:35) [<root>]
    at <anonymous> [<root>]

我已经确定/尝试过;

  • 我的模块导入 AgmCoreModule
  • 在我的模块中向架构添加了CUSTOM_ELEMENTS_SCHEMA（这没有效果）
  • 将纬度/lng 值绑定到文本整数

我的站点-map.component.ts：

import { Component, AfterViewInit, Injector, ViewEncapsulation, ViewChild, trigger, transition, style, animate, state,  } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { NotifyService } from '@abp/notify/notify.service';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import * as moment from "moment";
import { JTableHelper } from '@shared/helpers/JTableHelper';
import { AgmMap, AgmMarker } from '@agm/core';

 var google: any; 

@Component({

    templateUrl: 'site-map.component.html',
    animations: [appModuleAnimation()]
})
export class SiteMapComponent extends AppComponentBase {


 title: string = 'My first AGM project';
      lat: number = 51.678418;
      lng: number = 7.809007;

    constructor(
        injector: Injector
    )
    {
        super(injector);
    }

}

我的站点-map.component.html

<agm-map [latitude]="lat" [longitude]="lng">
                    <agm-map-marker [latitude]="lat" [longitude]="lng"></agm-map-marker>
                    </agm-map>

我app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';

import { ModalModule, TooltipModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';

import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';

import { AbpModule, ABP_HTTP_PROVIDER } from '@abp/abp.module';

import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';

import { API_BASE_URL } from '@shared/service-proxies/service-proxies';
import { AppConsts } from '@shared/AppConsts';

import { AppSessionService } from '@shared/common/session/app-session.service';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { AgmCoreModule } from '@agm/core';


@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HeaderNotificationsComponent,
        SideBarComponent,
        FooterComponent,
        LoginAttemptsModalComponent,
        LinkedAccountsModalComponent,
        LinkAccountModalComponent,
        ChangePasswordModalComponent,
        ChangeProfilePictureModalComponent,
        MySettingsModalComponent,
        NotificationsComponent,
        ChatBarComponent,
        ChatFriendListItem,
        NotificationSettingsModalCompoent,

    ],
    imports: [
        ngCommon.CommonModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        TabsModule.forRoot(),
        ModalModule.forRoot(),
        TooltipModule.forRoot(),
        FileUploadModule,
        AbpModule,
        AppRoutingModule,
        UtilsModule,
        AppCommonModule.forRoot(),
        ServiceProxyModule,
        AngularFireModule.initializeApp(firebaseConfig, 'my-app'),
        AngularFireDatabaseModule,
        AngularFireAuthModule,
         AgmCoreModule.forRoot({
          apiKey: 'YOUR_KEY'
        })
    ],
    providers: [
        ImpersonationService,
        LinkedAccountService,
        UserNotificationHelper,
        ChatSignalrService,
        QuickSideBarChat
    ]
})
export class AppModule { }

非常感谢您的帮助。

共有3个答案

孟乐
2023-03-14

感谢plotoshas在第71期中的回答，您必须通过以下方式利用angular 2 CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// ...

@NgModule({
  // ...
  schemas:  [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
陆晓博
2023-03-14

由于@developer033我我解决我的问题

邓丰
2023-03-14

只有在实现映射的组件具有子模块时，才会发生此错误，因此您也需要在没有forRoot（）的情况下将该模块添加到子模块中

应用程序模块

import { AgmCoreModule } from '@agm/core';

@NgModule({
 imports: [
    AgmCoreModule.forRoot({
      apiKey: ''
   })
  ]
})

child.module.ts

import { AgmCoreModule } from '@agm/core';

@NgModule({
 imports: [
    AgmCoreModule
  ]
})

这将很好地工作，因为现在子模块有了AgmCoreModule

 类似资料：

相关问答

angular2测试：不能绑定到“ng model”，因为它不是“input”的已知属性Angular 7并且不能绑定到“routerlink”，因为它不是“a”的已知属性svg循环-不能绑定到cx，因为它不是已知的本机属性Angular2-不能绑定到“窗体组”，因为它不是“窗体”的已知属性无法绑定到“router link”,因为它不是已知属性

相关文章

为什么我能达到的最大递归深度是不确定的？将密钥发送到Input WebElement失败，因为它不是绝对路径ServerSocket复用地址是否允许绑定到已经绑定的端口？如何查找slf4j已绑定到哪个库？能够在print_r（）的输出中看到一个变量，但是不确定如何在代码中访问它

相关阅读

字节二面不知温度经快手测开一面（不确定是不是提前批）巴菲特谈ChatGPT：它是一个超凡的发明，但是否最终对人类有益，还是一个未知数蔚来后端日常实习一面不知道温度经二本两个月从外包跳到阿里，Android开发不同公司面试难度

相关工具

中国省市选择器（含经纬度）nbnhhsh（能不能好好说话）自定义不规则TabBar看个片儿不发烫定位功能

相关文档

你不懂JS: 异步与性能Nginx 开发从入门到精通（不完整）每个程序员都应该了解的内存知识JavaScript 高级的知识点DIY 一个实用的 miniLAPP 服务器
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.