angularjs 相关问题

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

Angular 环境组合问题

错误:src/app/components/rooms/add-room/services/room.service.ts:40:51 - 错误 TS2339:类型“{}”上不存在属性“apiBaseUrl”。 40 返回 this.http.delete(${environment.apiBaseUrl}/api/

回答 1 投票 0

*ngIf 未按预期渲染 svg

我正在尝试使用 *ngIf 有条件地渲染 svg 图标。我已将 CommonModule 和 BrowserModule 导入到组件中,但每次运行代码时,svg 都不会按应有的方式呈现。 HTML

回答 1 投票 0

如果文本字段为空则添加验证

我是 Angular 和 Ionic 的新手,我正在尝试在我的警报文本框中添加验证。 默认情况下,我通过 css 禁用提交图标 “.comment-history-box{指针事件:无;}” 。我想要...

回答 1 投票 0

在 pdfmake 中使用 dataUrl 时出现无效图像错误

我正在使用 pdfmake 在 Angular 应用程序中生成 PDF 文档,并且只是尝试使用 dataURL 将图像添加到输出(遵循 pdfmake 文档)。 var 文档定义 = { 内容...

回答 4 投票 0

模块“rxjs”没有导出成员“firstValueFrom”

App.service 文件如下所示: 从“@nestjs/common”导入{可注入}; 从 '@nestjs/axios' 导入 { HttpService }; 从'rxjs'导入{Observable,firstValueFrom}; // 导入 { 第一个值...

回答 2 投票 0

Angular - 将两个不同的路径路由到同一延迟加载子模块中的不同组件

我有两条路 /a 和 /b 在我的父模块中,我将它们路由到同一个子模块: // 应用程序路由.moudle.ts { 路径:'a', loadChildren: () => import('./m-child/m-child.module').then(m...

回答 1 投票 0

同时编辑多个单元格IGX GRID Angular

我需要同时编辑同一列中的多个单元格。同时,使得单元格内部的实际数据变化被显示出来。是否可以在 igx grid Angul 中执行此操作...

回答 1 投票 0

Angular [错误] NG9:组件 AppComponent 的模板中发生属性错误

当我尝试在 Angular 中使用 for 循环时,我收到一条错误消息 这是我在 app.component.html 中的代码 当我尝试在 Angular 中使用 for 循环时,我收到一条错误消息 这是我的代码 app.component.html <app-story @for="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 我也尝试这个 <app-story *ngFor="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 这是我的代码 app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import {HeaderComponent} from './header/header.component'; import {StroyComponent} from './stroy/stroy.component'; import { NgModel } from '@angular/forms'; import { CommonModule, NgForOf } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, HeaderComponent, StroyComponent, NgForOf,CommonModule], templateUrl: './app.component.html', styleUrl: './app.component.scss'}) export class AppComponent { title = 'CatsBookProject'; postText =[ 'Hello , i am here to meet new friends and make a friends relationship', 'Hello everyone, Iam glad you are here', 'Hey, my name is Susanne. I amm 2 years old', 'I like eating cookies.']; postImgs =[ 'assets/Imge/img1.png', 'assets/Imge/im21.png', 'assets/Imge/img3.jpg', 'assets/Imge/img4.jpg',]; buttonClicked(){ alert("What's up");}} 这是错误消息 我使用 Angular 版本 17.2.3 也许有人知道我的代码出了什么问题 非常感谢 请查看有关新语法的文档。 这就是您的示例的样子... @for (let i of [0,1,2,3]) { <app-story [img]="postImgs[i]" [text]="postText[i]"></app-story> }

回答 1 投票 0

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

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