我知道这种问题已经被问过好几次了，但是在检查了所有答案之后我还没有找到解决方案。在我的 HTML 模板中，我想检查输入值是否已存在于数字数组中。如果存在，则会显示一条消息。我想用“indexOf”方法或“includes”来解决这个问题。但是，这不起作用。看看这个stackblitz。
HTML模板：
Numbers registered: {{ numbers }}
<form>
<label for="number" class="absolute left-0 -top-5 text-green-950 text-sm transition-all">number<span class="text-red-500">*</span></label>
<input id="number" #number="ngModel" (ngModel)="number" name="number" minlength="4" maxlength="4" required placeholder="number" />
<p class="text-sm px-3 text-red-500" *ngIf="!number.valid && number.touched">Enter exactly 4 digits!</p>
<p class="text-sm px-3 text-red-500" *ngIf="numbers.includes(number) && number.touched">This number already exists!
</p>
</form>
TS文件：
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
numbers:any = [1000,1100,1200,1300,1400];
}
您需要使用 [(ngModel)]="number"，向 .ts 添加变量编号，不要使用与编号相同的模板变量名称并搜索编号转换为 int
<!--now the template variable is numberID-->
<input id="number" #numberID="ngModel"
<!--see the "bannana" [( )] -->
[(ngModel)]="number"
name="number" minlength="4" maxlength="4" required placeholder="number" />
<!--you ask about includes(+number),see the "+"-->
<p class="text-sm px-3 text-red-500" *ngIf="numbers.includes(+number) &&
<!--and numberID.touched-->
numberID.touched">
This number already exists!
</p>
在.ts
number:number=0;
注意：我在 .html 中添加了注释（删除它以工作）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句