天道酬勤,学无止境

angular2-ngmodel

Angular 2 +如何使用相同的选择器(elementRef.nativeElement)选择和循环多个元素(Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement))

问题 在我的组件中,我试图取消选择具有相同类名的所有复选框。 querySelector每次(或一次)只选择第一个......并且querySelectorAll不选择任何东西。 这是功能。 我知道这样使用 jQuery 是错误的,但它说明了我的目标。 unsetAllOptions(){ var self = this; var i = 0; $("input.option_input").each(function(){ i++; var element = self.elRef.nativeElement.querySelector("input.option_input")[i]; if(element.checked){ // console.log(i) console.log('unchecking:',i); element.checked=false; element.dispatchEvent(new Event('change')); element = ""; } }); } 回答1 要达到预期结果,请使用以下选项 选项1: 当您使用 .each 方法时,使用索引和值可以避免 querySelectorAll,参考 - http://api.jquery.com/jquery.each/ $("input.option_input").each

2022-01-15 10:33:50    分类:技术分享    javascript   angular   angular2-ngmodel

Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

In my component I am trying to unselect all checkboxes with the same class name. querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything. this is the function. I know its wrong to use jQuery like that but it illustrates my goal. unsetAllOptions(){ var self = this; var i = 0; $("input.option_input").each(function(){ i++; var element = self.elRef.nativeElement.querySelector("input.option_input")[i]; if(element.checked){ // console.log(i) console.log('unchecking:',i); element.checked=false; element.dispatchEvent(new Event('change')); element =

2022-01-10 23:27:29    分类:问答    javascript   angular   angular2-ngmodel

选择列表设置所选项目角度 2 ngModel(select list set selected item angular 2 ngModel)

问题 这是我当前的代码: <select name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option> </select> 我正在加载一个数组中的所有角色,并且用户类有一个 Role 属性(它不像user.role = roles[0]那样加载,而是通过后端数据加载)。 问题是 selected 属性不起作用,而我的 select 没有转到正确的角色。 我究竟做错了什么? 回答1 只需删除 [attr.selected]="role == user.role ? 'true' : 'false'" 并将选定的角色分配给user.role和ngModel将使匹配的项目成为选定的项目。 如果role是一个对象,则分配的实例需要相同。 另请参阅最近添加的自定义比较 https://github.com/angular/angular/issues/13268自 4.0.0-beta.7 起可用 <select [compareWith]="compareFn" ... compareFn(val1, val2)

2021-12-22 00:37:49    分类:技术分享    angular   angular2-forms   angular2-ngmodel

Angular2 中的 ErrorHandler(ErrorHandler in Angular2)

问题 我有一个关于新类 ErrorHandler 的问题(已包含在 RC.6 中)。 我从官方文档中做了例子:https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html import{ErrorHandler} from "@angular/core"; import{NgModule} from "@angular/core"; export class MyErrorHandler implements ErrorHandler { call(error: any, stackTrace: any = null, reason: any = null) { // do something with the exception console.log("do something with the exception"); } // I handle the given error. public handleError( error: any ): void { console.log("I handle the given error"); } } @NgModule({ providers: [ { provide: ErrorHandler, useClass

2021-12-21 17:21:19    分类:技术分享    angular   error-handling   angular2-ngmodel

select list set selected item angular 2 ngModel

This is my current code: <select name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option> </select> I'm loading all the roles in an array, and the user class has a Role attribute (which is not loaded like user.role = roles[0] but just through the backend data). The problem is that the selected attribute is not working, and my select is not going to the correct role. What am I doing wrong?

2021-12-13 02:08:00    分类:问答    angular   angular2-forms   angular2-ngmodel

ErrorHandler in Angular2

I have a question about new class ErrorHandler (was included to RC.6). I did example from official docs: https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html import{ErrorHandler} from "@angular/core"; import{NgModule} from "@angular/core"; export class MyErrorHandler implements ErrorHandler { call(error: any, stackTrace: any = null, reason: any = null) { // do something with the exception console.log("do something with the exception"); } // I handle the given error. public handleError( error: any ): void { console.log("I handle the given error"); } } @NgModule({ providers:

2021-12-12 11:39:57    分类:问答    angular   error-handling   angular2-ngmodel

Angular 4 - 如何在输入类型中使用货币管道(Angular 4 - How to use currency pipe in input type)

问题 我有一个 HTML 输入: <input [(ngModel)]="item.value" name="inputField" type="text" /> 我想格式化它的值并使用现有的管道: .... [(ngModel)]="item.value | currency:'USD':true" ..... 此外,我正在尝试按以下方式使用它,但它第一次为我提供了理想的输出,并在更新字段时显示错误: <input type="text" [ngModel]="item.value | currency:'USD':true" (ngModelChange)="item.value=($event)"> 上面的代码导致以下错误。 ERROR 错误:InvalidPipeArgument: '' for pipe 'CurrencyPipe' 在 invalidPipeArgumentError (common.es5.js:2610) 在 formatNumber (common.es5.js:3176) 在 CurrencyPipe.webpackJsonp.../../../common/@angular/common.es5.js.CurrencyPipe.transform (common.es5.js:3350) 在 LandingPageComponent

2021-10-21 05:12:25    分类:技术分享    angular   html-input   angular-pipe   angular2-ngmodel

如何在 Angular 2 中使用 ngModel 在多选中设置默认选定值(How to set default selected values in multiselect with ngModel in Angular 2)

问题 如何在多选中设置默认选定值。 我从数据库中获取current_options和all_options并且我想更新current_options并再次发送新值 do database 。 更新数据库有效,但当我刷新页面时,没有选择任何选项。 current_options = [{id:1, name:'name1'}]; #from database all_options = [{id:1, name:'name1'},{id:2, name:'name2'}]; #from database 我的模板: <select multiple name="type" [(ngModel)]="current_options"> <option *ngFor="let option of all_options" [ngValue] = "option"> {{option.name}} </option> </select>` 回答1 如果您想使用 ngModel 创建多个选择和选项并设置默认值和两种方式绑定其工作代码 <div *ngFor="let options of optionsArray; let in = index"> <br> <select [(ngModel)]="res[in]" > <option [ngValue]="option" *ngFor=

2021-10-20 16:56:05    分类:技术分享    angular   angular-ngmodel   angular2-ngmodel   ngmodel

如何在表单内的 Angular ngx-bootstrap 的日期选择器中更改日期格式(How to change the date format in the datepicker of Angular ngx-bootstrap inside a form)

问题 在 Angular 4 应用程序中使用 ngx-bootstrap Datepicker, 我知道通常您可以通过以下方式指定日期格式: <input id="from" name="from" bsDatepicker [(bsValue)]="myModel" value="{{ myModel | date:'yyyy-MM-dd'}}"> 但是这次我在模板驱动的 Angular 表单中,所以我的输入没有绑定到像上面例子中的myModel这样的变量,但它只是绑定到表单: <input id="from" name="from" bsDatepicker ngModel> 那么在这种情况下如何指定日期格式? 编辑:看起来实现这一点的方法是在组件内创建一个新变量newVar然后将其与[(bsValue)]="newVar" : <input id="from" name="from" bsDatepicker ngModel [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}"> 但是我想知道是否有更好的解决方案。 回答1 [(bsValue)]始终可用于bsDatepicker ,它是否是输入字段 如果您只想更改一个字段的格式,则 [(bsValue)]="newVar" value="{{ newVar

2021-10-18 19:58:10    分类:技术分享    angular   datepicker   angular2-ngmodel   angular-forms   ngx-bootstrap

绑定文本区域中的值(Binding the value in a textarea)

问题 我正在尝试在 Angular2 中进行最简单的双向绑定。 我想在我的组件和它的模板之间共享一个变量。 我的模板是: <textarea [(ngModel)]="currentQuery"></textarea> 我的组件是: import { Component } from '@angular/core'; import { ViewChild } from '@angular/core'; import { OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'vs-home', templateUrl: 'home.component.html' }) export class HomeComponent { private currentQuery: string = ''; } 根据文档,这应该有效,但我得到: Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'textarea'. (" <div class="query-bar-container"> <textarea

2021-10-08 08:45:28    分类:技术分享    angular   typescript   angular2-ngmodel