向ng键添加条件

当文本输入包含特定值时，我想显示div。向ng键添加条件

对于我的模板，我有：

<input type="text" id="jobTitle" 
(click)="autoCompleteClick()" 
(keypress)="autoCompleteKeypress()" name="autocomplete" 
placeholder="Job Title" value="" >

我的想法是按键将运行autoCompleteKeyPress功能看起来像这样：

autoCompleteKeypress() { 
    if (this.jobTitle == 'bar' || this.jobTitle == 'Bar'){ 
     alert('BOO!'); 
    } 
}

目前我只是用一个测试警惕让它工作。

我的全成分为：

import { Component } from '@angular/core'; 
import { Input } from '@angular/core'; 

@Component({ 
    selector: 'sign-up', 
    templateUrl: './sign-up.component.html', 
    styleUrls: ['../variables.less', './sign-up.component.less'] 
}) 

export class SignUpComponent { 
    imgPath = 'assets/images/'; 
    //acInput = document.getElementById('jobTitle'); 

    @Input() jobTitle : string; 


    autoCompleteKeypress() { 
     if (this.jobTitle == 'bar' || this.jobTitle == 'Bar'){ 
     alert('BOO!'); 
    } 
}

很新的Angular2和打字稿一般，所以任何想法表示赞赏。谢谢！

来源

2017-06-18 devon93

在js上添加一个运行示例小提琴，plunker，jsbin或你的替代品，所以其他人不必复制粘贴你的代码。 – NikosKeyz

你想显示div而用户在文本框中输入一定的时间吗？ – CharanRoot

如果你需要做的就是隐藏和显示div基于特定的输入值，我会建议你利用基本Two-way binding机制与NgIf Directive类似如下

<input type="text" [(ngModel)]="jobTitle" id="jobTitle" name="autocomplete" placeholder="Job Title" value="" > 
<div *ngIf="jobTitle === 'bar' || jobTitle === 'Bar'"> 
    Contain to display 
</div>

来源

2017-06-18 18:15:57 Ajax

谢谢大家的答案。决定使用ngif而不是使用组件中的函数。 – devon93

通过分配给id，我们没有将输入值输入到this。你需要使用NgModel。但在这种情况下，您并不需要添加到类变量中。

更改HTML这样的：

<input type="text" id="jobTitle" 
(click)="autoCompleteClick()" 
(keypress)="autoCompleteKeypress($event)" name="autocomplete" 
placeholder="Job Title" value="" >

内部组件

autoCompleteKeypress(event) { 
    const jobTitle = event.target.value; 
    if (jobTitle == 'bar' || jobTitle == 'Bar'){ 
     alert('BOO!'); 
    } 
}

来源

2017-06-18 18:00:42 Skeptor

向ng键添加条件

回答

相关问题