带有重复文本的 Angular 4 搜索框答案

【问题标题】：Angular 4 search box with duplicate text带有重复文本的 Angular 4 搜索框
【发布时间】：2020-03-17 07:43:48
【问题描述】：

Angular 4 搜索框问题

当我们在一个文本框中输入值时，如何停止第二个搜索框文本中的值。我的页面中的每个项目都有多个搜索框。当我们在一个搜索框中键入任何文本时，相同的值将绑定到所有搜索框的其余部分。如何避免这种情况

<div class="search-container">
<div class="form-searchbox">
    <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm"   
               #searchElement
               type="text"
               name="userSearch"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
    </form>
</div>

【问题讨论】：

请您也发布其他文本框代码吗？？
有可能您将相同的模型绑定到所有文本框
如果您为所有输入元素提供相同的 id-#，您不能期望得到不同的结果。
如何动态传递id？对于每个元素
分享您的模板的完整代码

标签： angular angular5 angular4-forms angular4-router

【解决方案1】：

来自“[(ngModel)]”和“name”的问题尝试为各个输入框赋予唯一值

 <div class="search-container">
     <div class="form-searchbox">
      <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm"   
               #searchElement1
               type="text"
               name="userSearch1"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
      </form>
    </div>


    <div class="search-container">
     <div class="form-searchbox">
      <form>
          <input [(ngModel)]="studentSearchSvc.searchTerm2"   
               #searchElement2
               type="text"
               name="userSearch2"
               class="form-control"
               placeholder="studentName"
               autocomplete="off" />      
        <span class="search-icon" (click)="onButtonClick()"/> 
      </form>
    </div>

【讨论】：