如何清除 select 元素
How to clear select element
我有一个设计,我通过 select 从下拉菜单中添加一个项目来向我的页面添加一个卡片。我可以通过点击移除芯片。但是,我似乎无法清除 select 元素的值。我尝试了几种方法,但 none 有效。
使用 Angular Material select 元素:
https://plnkr.co/edit/KU1CxBqLwG5XtbvyEjJj?p=preview
使用 Angular select 元素:
https://plnkr.co/edit/ewSlIRDHii3PnXRtnKgw?p=preview
html:
<div class="chips-overview-example">
<md-card>
<md-toolbar color="primary">Dynamic Chips</md-toolbar>
<md-card-content>
<md-chip-list>
<md-chip *ngFor="let person of people" (click)="remove($event)">
{{person.name}}
</md-chip>
<md-select id="names"
placeholder="Names"
[ngModel]="name"
(ngModelChange)="add($event)">
<md-option *ngFor="let name of names"
value="{{name.code}}">
{{name.name}}
</md-option>
</md-select>
</md-chip-list>
</md-card-content>
</md-card>
</div>
Component.ts
import {Component, ElementRef, Output} from '@angular/core';
export interface Person {
name: string;
}
@Component({
selector: 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
styleUrls: ['chips-overview-example.css']
})
export class ChipsOverviewExample {
visible: boolean = true;
@Output() nameForm;
names = [
{code: "F",name: "Frank",description: ""},
{code: "G",name: "George",description: ""},
{code: "H",name: "Henry",description: ""},
{code: "I",name: "Inigo",description: ""},
{code: "J",name: "Jose",description: ""},
{code: "K",name: "Kevin",description: ""}
];
removedNames = [];
people: Person[] = [];
add(selection): void {
let selected = this.names.find(el => el.code === selection);
console.log("adding: ", selected, " to ", JSON.stringify(this.people));
this.people.push({name: selected.name});
this.removedNames.push(selected);
this.names.splice(this.names.findIndex(el => el === selected), 1);
}
remove(chip) {
let name = chip.target.innerText;
let index = this.people.findIndex(el => el.name === name);
this.people.splice(index, 1);
this.names.push(this.removedNames.find(el => el.name === name));
this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
this.names.sort(function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
}
toggleVisible(): void {
this.visible = false;
}
}
main.ts(模块)
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '@angular/material';
import {ChipsOverviewExample} from './chips-overview-example';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
declarations: [ChipsOverviewExample],
bootstrap: [ChipsOverviewExample],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
我"fixed"为此添加了一个功能。在添加芯片的过程中,我还从下拉列表中删除了值。用户不能再select它,系统也不能。
不幸的是,当我删除芯片时,我将该选项重新添加到下拉列表中。如果该选项是最后一个 selected,它会出现在输入框中。
不完全(傻瓜)证明。
无论如何,这里是更新 add() 和 remove() 方法。
removedNames = [];
add(selection): void {
console.log("nameForm", this.nameForm);
let selectedName = this.names.find(el => el.code === selection).name;
console.log("adding: ", selectedName, " to ", this.people)
if (this.people.findIndex(person => person.name === selectedName) < 0) {
this.people.push({name: selectedName});
}
this.nameForm = '';
this.removedNames.push(this.names.find(el => el.code === selection));
this.names.splice(this.names.findIndex(el => el.code === selection), 1);
}
remove(chip) {
let name = chip.target.innerText;
let index = this.people.findIndex(el => el.name === name);
this.people.splice(index, 1);
this.names.push(this.removedNames.find(el => el.name === name));
this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
}
最终的答案是直接使用formGroup的patchValue方法修改值。 https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#set-data
我有一个设计,我通过 select 从下拉菜单中添加一个项目来向我的页面添加一个卡片。我可以通过点击移除芯片。但是,我似乎无法清除 select 元素的值。我尝试了几种方法,但 none 有效。
使用 Angular Material select 元素: https://plnkr.co/edit/KU1CxBqLwG5XtbvyEjJj?p=preview
使用 Angular select 元素: https://plnkr.co/edit/ewSlIRDHii3PnXRtnKgw?p=preview
html:
<div class="chips-overview-example">
<md-card>
<md-toolbar color="primary">Dynamic Chips</md-toolbar>
<md-card-content>
<md-chip-list>
<md-chip *ngFor="let person of people" (click)="remove($event)">
{{person.name}}
</md-chip>
<md-select id="names"
placeholder="Names"
[ngModel]="name"
(ngModelChange)="add($event)">
<md-option *ngFor="let name of names"
value="{{name.code}}">
{{name.name}}
</md-option>
</md-select>
</md-chip-list>
</md-card-content>
</md-card>
</div>
Component.ts
import {Component, ElementRef, Output} from '@angular/core';
export interface Person {
name: string;
}
@Component({
selector: 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
styleUrls: ['chips-overview-example.css']
})
export class ChipsOverviewExample {
visible: boolean = true;
@Output() nameForm;
names = [
{code: "F",name: "Frank",description: ""},
{code: "G",name: "George",description: ""},
{code: "H",name: "Henry",description: ""},
{code: "I",name: "Inigo",description: ""},
{code: "J",name: "Jose",description: ""},
{code: "K",name: "Kevin",description: ""}
];
removedNames = [];
people: Person[] = [];
add(selection): void {
let selected = this.names.find(el => el.code === selection);
console.log("adding: ", selected, " to ", JSON.stringify(this.people));
this.people.push({name: selected.name});
this.removedNames.push(selected);
this.names.splice(this.names.findIndex(el => el === selected), 1);
}
remove(chip) {
let name = chip.target.innerText;
let index = this.people.findIndex(el => el.name === name);
this.people.splice(index, 1);
this.names.push(this.removedNames.find(el => el.name === name));
this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
this.names.sort(function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});
}
toggleVisible(): void {
this.visible = false;
}
}
main.ts(模块)
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MaterialModule} from '@angular/material';
import {ChipsOverviewExample} from './chips-overview-example';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
declarations: [ChipsOverviewExample],
bootstrap: [ChipsOverviewExample],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
我"fixed"为此添加了一个功能。在添加芯片的过程中,我还从下拉列表中删除了值。用户不能再select它,系统也不能。
不幸的是,当我删除芯片时,我将该选项重新添加到下拉列表中。如果该选项是最后一个 selected,它会出现在输入框中。
不完全(傻瓜)证明。
无论如何,这里是更新 add() 和 remove() 方法。
removedNames = [];
add(selection): void {
console.log("nameForm", this.nameForm);
let selectedName = this.names.find(el => el.code === selection).name;
console.log("adding: ", selectedName, " to ", this.people)
if (this.people.findIndex(person => person.name === selectedName) < 0) {
this.people.push({name: selectedName});
}
this.nameForm = '';
this.removedNames.push(this.names.find(el => el.code === selection));
this.names.splice(this.names.findIndex(el => el.code === selection), 1);
}
remove(chip) {
let name = chip.target.innerText;
let index = this.people.findIndex(el => el.name === name);
this.people.splice(index, 1);
this.names.push(this.removedNames.find(el => el.name === name));
this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);
}
最终的答案是直接使用formGroup的patchValue方法修改值。 https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#set-data