为什么 angular 不将我的 var 与 ngModel 同步？

Question

早上好，几周前我开始使用 Angular 进行开发。目前我运行在使用 ngModel 时遇到问题。

Component.ts:

import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-toggle-search',
  templateUrl: './toggle-search.component.html',
  styleUrls: ['./toggle-search.component.css']
})
export class ToggleSearchComponent implements OnInit {

  constructor(private element: ElementRef) { }

  searchTerm = "";

  ngOnInit(): void {
  }

  toggleUserSubmittedSearchEvent() {
    this.element.nativeElement
      .dispatchEvent(new CustomEvent('userSubmittedSearch', {
        detail: this.searchTerm,
        bubbles: true
      }));
  }

  showSearchBar(){
    let searchbar = document.getElementById('searchBar');
    let size = window.innerWidth; 

    searchbar.style.display = "inline-block";
    searchbar.style.width = (size < 600 ? 150 : size/4).toString() + "px"; 
  }

  hideSearchBar(){
    document.getElementById('searchBar').style.display = "none";
  }

}

HTML:

<form 
        class="search" 
        (submit)="this.toggleUserSubmittedSearchEvent()" 
        onsubmit="return false"
        (mouseover)="this.showSearchBar()"
        (mouseout)="this.hideSearchBar()"
    >        
        <input [(ngModel)]="searchTerm" type="text" id="searchBar" placeholder="search"/>
        <p>⚲</p>
</form>

函数 toggleUserSubmittedSearchEvent() 应调度包含用户输入的 searchterm 的事件。 var searchTerm 应该包含来自输入标签的输入字符串。我的问题是 Angular 不与输入标签同步 searchTerm。我错过了什么？

Answer 1

当你像那样使用 ngModel 时，你需要在输入中添加一个名称，并且你需要使用插值来显示数据。

    <input [(ngModel)]="searchTerm" type="text" id="searchBar" placeholder="search" name="input"/>
    <p>⚲{{ searchTerm }}</p>

您的代码中还有其他问题，但这些问题不会影响那部分。但是，请记住 EventEmitter 必须从 @angular/core 导入，而不是从作为测试库的 protractor 导入。

在 Angular 中直接访问 DOM 是一种不好的做法，就像您正在做的那样。使用 ViewChild 装饰器和 Renderer2 服务。

更新

使用 Renderer2，您可以在不直接接触 DOM 的情况下操作元素。

为了更好地了解此服务，请查看以下链接：

Answer 2

您需要做的是将 name 属性添加到您的 input 字段

<input [(ngModel)]="searchTerm" name="search"

或添加此属性[ngModelOptions]="{standalone: true}

否则，您应该会在浏览器的控制台中收到以下错误消息

Error: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

更多信息here：

Defining a name attribute is a requirement when using [(ngModel)] in combination with a form.

为什么 angular 不将我的 var 与 ngModel 同步？

Why isn´t angular syncing my var bound with ngModel?

ngmodel

angular