angularjs 相关问题

用于关于开源JavaScript框架AngularJS(1.x)的问题。不要将此标记用于Angular 2或更高版本;相反,使用[angular]标签。

Angularjs ng-包括强制重新加载

我已经阅读了有关此主题的几篇文章,但在最初从远程数据服务器加载后,仍然无法通过 ng-include 加载数据以重新加载。 (示例如何重新加载/刷新我...

回答 3 投票 0

AngularJS 按钮显示/隐藏评论框

我一直在学习 AngularJS 并决定用它来做我的项目,我需要一个按钮的帮助。 我正在制作一个博客平台,我想对帖子发表评论。 这是我的帖子: 我想要什么...

回答 3 投票 0

用span替换标签

我正在使用 AngularJS 和 mmenu 制作菜单,并且我有一些子菜单无法正确用作子菜单。本质上,mmenu 将跨度视为菜单,当您单击它时,它会展开(或 tr...

回答 3 投票 0

在 Angular 中使用 cdkDropListData 时出现错误,无法绑定到“cdkDropListData”,因为它不是“div”的已知属性

<div cdkDropList #girlList="cdkDropList" [cdkDropListData]="girls" [cdkDropListConnectedTo]="[convaList]" class="example-list" (cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag> <div class="card-body p-2 justify-content-between align-items-center d-flex"> <span class="reading-grade font-weight-bold">{{girls_data.id}}</span> <div class="student-grade flex flex-grow-1"> <p class="justify-content-between align-items-center d-flex"> <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span> <span>{{girls_data.gender}}</span> </p> <p class="justify-content-between align-items-center d-flex"> <span>{{girls_data.currentAcademicYear}}</span> <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span> </p> </div> <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span> </div> </div> 使用 [cdkDropListData] 时,控制台上出现错误,无法绑定到“cdkDropListData”,因为它不是“div”的已知属性。 我是 Angular 新手,所以请避免新手行为 我已经在 module.ts 中导入了 CdkDragDrop 这是组件文件。 import {Component, NgModule} from '@angular/core'; import {StudentModel} from '../model/studentRepository.model'; import {Student} from '../model/student.model'; import {CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; @Component({ selector: 'student-selector', templateUrl: 'studentSelector.component.html', styleUrls: ['./studentSelector.component.css'] }) export class StudentSelector { boys = []; girls = []; constructor(private dataModel: StudentModel) { this.boys = dataModel.getStudents(); this.girls = dataModel.getStudents(); } get students(): Student[] { return this.dataModel.getStudents(); } conva = []; drop(event : CdkDragDrop<string[]>){ transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } } 这是模块文件。 import {NgModule} from '@angular/core'; import { StudentModel } from './studentRepository.model'; import { SimpleDataSource } from './datasource.model'; import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({ providers: [StudentModel,SimpleDataSource], imports : [DragDropModule] }) export class ModelModule { } 导入应该是这样的: import {NgModule} from '@angular/core'; import { StudentModel } from './studentRepository.model'; import { SimpleDataSource } from './datasource.model'; import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({ providers: [StudentModel,SimpleDataSource], imports : [DragDropModule] }) export class ModelModule { } 并且(参见代码中的注释) import {Component} from '@angular/core'; <= NgModule removed import {StudentModel} from '../model/studentRepository.model'; import {Student} from '../model/student.model'; import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; <= DragDropModule removed @Component({ selector: 'student-selector', templateUrl: 'studentSelector.component.html', styleUrls: ['./studentSelector.component.css'] }) export class StudentSelector { ... } 一般: xxxModule 只能在模块级别导入,而不是在组件级别导入。 另外,正如我在评论中提到的: 看起来您的 StudentSelector 与您的 ModelModule 位于不同的模块中(至少它不是您提供的声明的一部分)。组件只能在声明它的模块中使用(声明列表),或者导入另一个模块,该模块反过来声明该组件并导出它(导出列表)。 将其导入您的应用程序模块中 import { DragDropModule} from '@angular/cdk/drag-drop'; 然后重新运行应用程序。 问题很可能是没有导入正确的模块。 import { DragDropModule} from '@angular/cdk/drag-drop'; 不过,如果有人面临这个问题,则意味着您尚未在任何模块中声明您的组件(例如:App.module.ts) 因为这个属性需要模块声明。 (例如:如果有人使用ComponentFactoryResolver打开一个组件,那么它不需要在app.module中声明,但要使用'[cdkDropListData]',则需要声明它app.module) 这不是非常技术性的解决方案,但我遇到过一些事情。 1。在加载页面之前清除缓存(如果您通常不清除它)。有时会错过将数据获取到变量的情况。 2。修复当前页面中的运行时错误(可能在另一个块中但在同一页面中)。 但是我遇到了第一个问题。当我清除缓存时它起作用了。 确保在该模块中导入cdkDropListData,其中在其声明中导入相同的组件。 简单来说,想要使用 cdkDropListData 模块的组件必须是 imported 模块中。 现在声明部分中的相应组件和 cdkDropListData 在同一模块的导入部分 如果您的项目使用,例如,shared.module.ts 您必须在其中导入和导出cdkDropListData 现在您必须将共享模块导入到导入相应组件的同一模块中

回答 5 投票 0

无法绑定到“cdkDropListData”,因为它不是“div”的已知属性。?

我正在尝试在 Angular 中使用 cdk 进行拖放操作,但是当我尝试将代码导入到我的项目(导入等)时,终端显示无法绑定到“cdkDropListData”,因为它不是已知的财产...

回答 1 投票 0

测试使用await Karma+Jasmine JS的异步函数

我正在尝试在 angularjs v1.5.0 项目中使用 Karma 和 Jasmine 测试异步函数。这个异步函数 (a) 有 2 个等待,如下所示: 异步函数a(){ 让 var1 = 等待 b() 控制台.log(...

回答 1 投票 0

当值改变时,Angular ng-show 无法正常工作

我试图显示 div 取决于登录用户的权限。 {{许可}} ...... 我试图显示 div 取决于登录用户的权限。 <div class="container"> <p> {{permission}}</p> <div ng-show="permission" class="admin_panel"> .... </div> </div> 在控制器中设置: $scope.init = function(){ if($window.sessionStorage.isAdmin){ $scope.permission = $window.sessionStorage.isAdmin; } $log.info("are you admin??? " + $scope.permission); }; $scope.init(); 在控制台中,我可以验证权限是否设置为 false 并且 {{permission}} 还显示 它的值是假的。然而,即使该值为 false,ng-show 仍然显示。我不确定这有什么问题。 你试过ng-show="permission === true;"吗?据我了解,ng-show旨在评估引号内的内容。这只是明确地说明评估。我有过这样的经历:由于某种奇怪的原因,仅仅在引号内包含一个变量并不是 ng-show 能够识别的评估。 我有一个类似的问题,除了我的变量在里面改变了 像这样的超时函数: <div ng-show="check"> something .... </div> setTimeout(function(){ check = false; },500); 当我在超时内添加 $scope.$apply() 时,问题就解决了: setTimeout(function(){ check = false; $scope.$apply() },500); 如果你想显示或隐藏一些取决于用户权限的内容,你应该使用“ng-if”而不是“ng-show”。 ng-show/ng-hide 仅添加或删除显示或隐藏该元素的 CSS 类(display:none),但用户可以在浏览器中轻松更改它。 使用 ng-if:“如果分配给 ngIf 的表达式计算结果为假值,则该元素将从 DOM 中删除,否则该元素的克隆将被重新插入到 DOM 中。” https://docs.angularjs.org/api/ng/directive/ngIf 我有同样的问题,除了 ng-show 之外,一切都工作正常。我错过了一些愚蠢的事情。当您从文档的不同部分调用控制器时,您无法在它们之间共享数据。例如我有 2 个 div 标签 在文档中 <div id="1" ng-controller="contentCtrl"> <div ng-click="toggleSidebarShow()"> <!-- some code here --> </div> </div> <div id="2" ng-controller="contentCtrl"> <div ng-show="showSidebar"> </div> </div> div 1 和 div2 的 contentCtrl 之间的 showSidebar 未共享。 在控制器中 // some code $scope.showSidebar = true; $scope.toggleSidebar = function (){ $scope.showSidebar = ! $scope.showSidebar; }; 但是这个代码不起作用,因为toggleSidebar在div2标签之外调用并且有它自己的showSidebar。要解决这个问题,您必须使用服务或模块。请参阅此链接了解更多信息。 还要检查的另一件事是,当页面加载时,在检查元素中检查您尝试使用 ng-show 的元素是否在具有 ng-controller 指令的元素内呈现。 如果带有 ng-show 的元素位于 ng-controller 元素之外,那么 ng-show 将不起作用 我有时会遇到 ng-show/hide 问题...仍在 AngularJs v1.3.16 中 // this is not working sometimes <td ng-hide="showrec == x.SeqNum> <a href="javascript:void(0)" ng-click="showrec = x.SeqNum; $apply()">xxx</a> </td> // but this version is ng-click="showrecSeqNum(x)" $scope.showrecSeqNum = function (x) { $scope.showrec = x.SeqNum; // $scope.$apply(); };

回答 6 投票 0

Angular router.navigate 显示错误页面?独立。 ngOnInit()

我请求创建一个用户可以填写的表单。另外还应考虑拒绝访问和未经授权的访问。独立使用。由于应用程序组件是程序入口点,我在 ngOn 中检查这些...

回答 1 投票 0

NG8001 Angular Web 中应用程序的组件标头错误

我创建了一个小的角度网络,并使用命令行 ng g c Header 创建了标题目录 我在 header.component.html** 中写了一个小 sympil 段落 ** 标题有效! 还有这个...

回答 1 投票 0

如何在 Javascript 控制台中以可读的方式显示错误消息?

我目前正在使用 Angular JS,有时我会在控制台中收到一些错误消息,内容如下: angular.js:15697 **错误:[$injector:unpr] http://errors.angularjs.org/1.8.2/$

回答 1 投票 0

如何更新具有不同类型的数组,并且辅助数组在打字稿中具有不同类型

let user: { id: 号码, name: 字符串 }[] = [ {“id”:0,“名称”:“ABC”}, {“id”:1,“名称”:“XYZ”} ]; 让 dataList: { id: 数字,

回答 2 投票 0

调整 NG-Map (AngularJS) 中的地图标记大小?

我正在尝试使用scaledSize调整地图图标的大小,但是图标没有改变,这是我的代码: 这有效: 我正在尝试使用 scaledSize 调整地图图标的大小,但是图标没有改变,这是我的代码: 这有效: <marker icon="{resource.marker_circle}" class="marker-icon" id="{resource.id}" position="{resource.address}" title="{resource.name}" id="resource_clicked" value="{resource.id}" on-mouseover="showInfoWindow(event, '{resource.id}')"> 但是当我尝试调整图标大小时,它不适用于scaledSize: <div class="map-container"> <div style="margin: 0 auto; overflow:hidden; background: white;"> <div style=" width: 100%; margin:center; height: 257px; border: none; border-radius: 25px;" map-lazy-load="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> <ng-map ng-map-custom style="width: 100%;height: 100%;border: none; border-radius: 25px;" center="Santa Ana, CA" zoom="11"> {!resources.filter('category_ref', _equals(my.category)).each(per_page: 30, page:response._page_44_resources_repeatingsection1) do |resource|} <marker icon="{url: resource.marker_circle, scaledSize:[32,40], origin: [0,0], anchor: [16,40]}" class="marker-icon" id="{resource.id}" position="{resource.address}" id="resource_clicked" value="{resource.id}" on-mouseover="showInfoWindow(event, '{resource.id}')"></marker> <info-window id="{resource.id}" max-width="300" style="display: none;"> <div ng-non-bindable=""> <div id="siteNotice"></div> <a href="" response-click="go"> <h3 id="firstHeading" class="firstHeading">Location - # of Searches</h3> </a> <div id="bodyContent"> <p> {resource.city} </p> </div> </div> </info-window> {!end} </ng-map> </div> </div> </div> 尝试按照以下语法使用它 - { url: require('../images/vehicle-active.png'), // gives a data://<value> scaledSize: { height: 40, width: 40 } }

回答 1 投票 0

在 Angular JS 项目中更改基本 url 时未加载图像

我想更改基本网址 加载应用程序时,URL 为 http://localhost:4200/#/ 我想将其更改为 http://localhost:4200/carrom/。 为此,我将基本网址更改为然后加载您...

回答 1 投票 0

Material Design 图标闪烁(FOUT?)

我在 Angular 2 应用程序上注意到,在 IE 11 中,我所有的材料设计图标都会在显示实际图标之前闪烁文本。有针对这个的解决方法吗?有没有办法使用某种

回答 3 投票 0

Angular ngx-markdown 破坏 markdown 并转换为纯文本

所以我的 Angular 项目遇到了问题,我的目标是使用 markdown 在网页上呈现内容,所以我决定尝试一下 ngx-markdown。现在我相信我已经导入了所有东西

回答 1 投票 0

window.open("url","_self") 在本地主机 url 上运行良好,但当我将其放在服务器上时则不然

我有一个 angularJS 前端,当客户单击“付款”按钮时,我会重定向到第三方支付网关。 我目前正在使用以下功能重定向到支付网关...

回答 4 投票 0

Vis.js 网络图不随节点更改而更新

我有一个函数可以清除节点或边数据集中可能存在的任何数据,然后继续用新数据重新填充它们。这是一个分层网络,级别是在...

回答 3 投票 0

“npm run dev”和“npm start”之间的区别

我对 Node 和 AngularJS 非常陌生。 我可以知道节点终端中的 npm run dev 和 npm start 命令之间的区别吗?

回答 4 投票 0

如何在反应中映射到另一个地图内而不重复渲染

我有数组中所有对象的列表 让数组= [ {名称:“Galaxy S22”,存储空间:“128GB”}, {名称:“Galaxy S22 5G”,存储空间:“128GB”},...

回答 1 投票 0

如何根据其他键从数组中过滤特定键值

我有一个包含产品名称及其存储的数组 let array = [{名称:“三星 A”,存储:“128GB”},{名称:“三星 B”,存储:“128GB”},{nam...

回答 1 投票 0

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