Html 如何使文本以小写形式返回
我有一个输入，用户可以在按下enter键时搜索一个芯片并返回一个匹配的芯片，但我想知道如何使输入在按下enter键后始终返回小写，因为一段时间看起来用户可以创建两个不同的芯片，一个使用大写字母，另一个使用小写字母，即使它只存储小写字母 比如说现在, 用户用大写字母输入“图表->创建“图表”芯片->刷新浏览器后，以小写字母“图表”显示 用户用小写字母输入“图表->创建“图表”芯片->刷新浏览器后，以小写字母“图表”显示 此外，如果用户先用大写字母创建芯片，看起来他们可以多次创建同一芯片，但如果他们先用小写字母创建芯片，输入会阻止用户多次创建同一芯片，这就是我想要的 正在尝试做的事 我只想创建一个芯片，如果用户输入小写或大写，并防止他们试图创建相同的芯片再次大写或小写 HTMLHtml 如何使文本以小写形式返回,html,angular,typescript,filter,angular-material,Html,Angular,Typescript,Filter,Angular Material,我有一个输入，用户可以在按下enter键时搜索一个芯片并返回一个匹配的芯片，但我想知道如何使输入在按下enter键后始终返回小写，因为一段时间看起来用户可以创建两个不同的芯片，一个使用大写字母，另一个使用小写字母，即使它只存储小写字母 比如说现在, 用户用大写字母输入“图表->创建“图表”芯片->刷新浏览器后，以小写字母“图表”显示 用户用小写字母输入“图表->创建“图表”芯片->刷新浏览器后，以小写字母“图表”显示 此外，如果用户先用大写字母创建芯片，看起来他们可以多次创建同一芯片，但如果他们
但也有同样的问题，用户可以用同一个单词创建多个标签，比如“Apple”、“Apple”、“Apple”，而不是一个。尝试在HTML文件中使用小写管道
尝试在HTML文件中使用小写管道
检查代码和注释
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value.toLowerCase(); //<--first to lowerCase
// Better use findIndex
const index=this.allFruits.findIndex((f) => f.toLowerCase() ===value)
if (index>=0) {
this.fruits.push(this.allFruits[index]); //<--push the element of
// allFruits, not the "value"
this.allFruits.splice(index,1) //remove the fruit of the list
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
}
this.fruits.push（this.allFruits[index]）；//检查代码和注释
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value.toLowerCase(); //<--first to lowerCase
// Better use findIndex
const index=this.allFruits.findIndex((f) => f.toLowerCase() ===value)
if (index>=0) {
this.fruits.push(this.allFruits[index]); //<--push the element of
// allFruits, not the "value"
this.allFruits.splice(index,1) //remove the fruit of the list
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
}
this.fruits.push（this.allFruits[index]）；//我想小写的管道解决了这个问题。我刚刚运行了这个项目，它对我来说很好
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{ fruit | lowercase }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{ fruit | lowercase }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
{{水果|小写}}
取消
{{水果|小写}}
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{ fruit | lowercase }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{ fruit | lowercase }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
{{水果|小写}}
取消
{{水果|小写}}