在此代码中，如何在下拉列表中将2个值设置为默认值，并且当我刷新页面时，应将最后2个所选值设置为默认值 预先感谢
答案 0 :(得分：1)
您可以使用localStorage存储一个人选择的多个值...，并在刷新页面时从构造器中的localStorage提取这些值。
您可以通过以下两项更改来更新堆栈闪电战，以查看效果...
select-multi-example.ts
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/** @title Select with multiple selection */
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
toppings = new FormControl();
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
selected:string[]; //= ['Mushroom', 'Onion'];
previousSelection:string[];
constructor(){
this.selected = [];
this.previousSelection = [];
var readStore = localStorage.getItem('selected');
if (readStore.length>0){
this.previousSelection = readStore.split(",");
}
if (this.previousSelection.length>0){
for(var i=0; i<this.previousSelection.length; i++){
this.selected.push(this.previousSelection[i]) ;
}
}
}
selectionChanged(passedVal){
while(this.selected.length>2){
this.selected.shift();
}
var combinedString = this.selected.join();
localStorage.setItem('selected', combinedString);
}
}
select-multiple-example.html
Previous selection: <b>{{previousSelection}}</b> <br/>
2 Valid selections: <b>{{selected}}</b><br/>
<br/>
<mat-form-field>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple [(ngModel)]="selected" (selectionChange)="selectionChanged($event.value)">
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
更新：尽管用户试图选择2个以上的代码来反映这一点，但用户仍请求仅选择2个选项；但是，有open issue表示，在更新ngModel时，mat-select选项不会更新；这就是为什么用户可以选择2个以上的多个选项，但是只有2个选项（我们也在屏幕上显示）的原因。
更新＃2 （针对物料表）： 将现有的 table-basic-example.html 替换为：
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="checked">
<mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox [(ngModel)]="element.checked" (click)="selectionChanged(element)"></mat-checkbox>
</mat-cell>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}" (click)="row.highlighted = !row.highlighted" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
</div>
<hr/>
<div *ngFor="let item of selectedCells">
{{item.position}} - {{item.name}}
</div>
<!-- Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
将现有的 table-basic-example.ts 替换为：
import { Component } from '@angular/core';
/**
* @title Basic table
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns = ['checked', 'position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
selectedCells:Element[] = [];
// highlight(element: Element) { element.highlighted = !element.highlighted; }
selectionChanged(val: Element){
console.log(val);
if(!val.checked){
if (this.selectedCells.length <2){
/* just insert new entry */
var duplicateCheck = false;
for(var j=0; j<this.selectedCells.length;j++){
if (this.selectedCells[j].position == val.position ){
duplicateCheck = true;
}
}
if(!duplicateCheck){
this.selectedCells.push(val);
}
} else {
for(var j=0; j<this.selectedCells.length;j++){
if (this.selectedCells[j].position == val.position ){
duplicateCheck = true;
}
}
if(!duplicateCheck){
this.selectedCells.push(val);
/* remove the oldest entry - and insert new entry */
for(var i=0; i<this.dataSource.length; i++){
if(this.dataSource[i].position == this.selectedCells[0].position){
//console.log("about to remove",this.selectedCells[0].position);
this.dataSource[i].checked = false;
}
}
this.selectedCells.shift();
//console.log(this.dataSource);
}
}
}
}
}
export interface Element {
checked: boolean;
name: string;
position: number;
weight: number;
symbol: string;
highlighted?: boolean;
hovered?: boolean;
}
const ELEMENT_DATA: Element[] = [
{ checked: false, position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ checked: false, position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ checked: false, position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ checked: false, position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ checked: false, position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ checked: false, position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ checked: false, position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ checked: false, position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ checked: false, position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ checked: false, position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
{ checked: false, position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' },
{ checked: false, position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
{ checked: false, position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
{ checked: false, position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
{ checked: false, position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
{ checked: false, position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
{ checked: false, position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
{ checked: false, position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
{ checked: false, position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
{ checked: false, position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
];
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */