Question

这个想法很简单：在文本区域内的键盘按下时触发自动完成功能，因此用户在选择名称时会获得帮助。如果我做这样的事情：

HTML

  <div class="col-md-12">
          <textarea rows="8" class="form-control top-dist " list="employees" name="employees" (keydown)='eventHandler($event)'
            type="text" placeholder="Add Post" [(ngModel)]="posts.body" name="body">

          </textarea>
          <div *ngIf="list">
            <ul *ngFor="let name of postName">
              <li>{{name.name}}</li>

            </ul>
          </div>
        </div>

TS：

@HostListener("window:keydown", ["$event"])

  eventHandler(event: KeyboardEvent) {
    if (event.keyCode === 65) {
      this.list=true;
    }
  }

它有效，当我按下“ a”键时，我可以看到员工列表。但是当我尝试这种方式时，我看不到列表（自动填充）：

HTML

<div class="col-md-12">
          <textarea rows="8" class="form-control top-dist " list="employees" name="employees" (keydown)='eventHandler($event)'
            type="text" placeholder="Add Post" [(ngModel)]="posts.body" name="body">

          </textarea>
          <datalist *ngIf="list" id="employees">
            <option *ngFor="let name of postName" [value]="name.name">

          </datalist>
        </div>

（TS相同）。那我在做什么错？有人可以给我指出正确的方向吗？

Answer 1

答案： uniform mat4 u_MVPMatrix; // A constant representing the combined model/view/projection matrix. uniform mat4 u_MVMatrix; // A constant representing the combined model/view matrix. attribute vec4 a_Position; // Per-vertex position information we will pass in. attribute vec3 a_Normal; // Per-vertex normal information we will pass in. attribute vec2 a_TexCoordinate; // Per-vertex texture coordinate information we will pass in. varying vec3 v_Position; // This will be passed into the fragment shader. varying vec3 v_Normal; // This will be passed into the fragment shader. varying vec2 v_TexCoordinate; // This will be passed into the fragment shader. // The entry point for our vertex shader. void main() { // Transform the vertex into eye space. v_Position = vec3(u_MVMatrix * a_Position); // Pass through the texture coordinate. v_TexCoordinate = a_TexCoordinate; // Transform the normal's orientation into eye space. v_Normal = vec3(u_MVMatrix * vec4(a_Normal, 0.0)); // gl_Position is a special variable used to store the final position. // Multiply the vertex by the matrix to get the final point in normalized screen coordinates. gl_Position = u_MVPMatrix * a_Position; }标签甚至没有关闭。参见参考文献here

编辑：我之前没有注意到，但是您将<option>与textarea一起使用，而datalist仅与datalist一起使用，请参见参考文献here < / p>

您应该将其用作input

主题提示：查看您的代码，我注意到您可能需要考虑的几件事。您真的不需要在这里收听关键事件。我认为您的<option [value]="name.name">Display text</option>的最佳条件就是*ngIf。

此外，您可能需要阅读以下内容：

FormGroups
双向数据绑定不是最佳选择，应避免使用它

角度：在文本区域内触发数据列表（onKeyDown）

1 个答案: