(更改)仅在按角度2输入后才能工作

时间:2019-02-20 09:18:07

标签: angular typescript angular2-routing web-deployment angular2-forms

我想显示一个列表,该列表显示与文本框中与用户输入的值匹配的行。 列表必须随着用户不断输入值而动态变化。 这就是为什么我尝试在输入文本框中使用(更改)事件侦听器的原因。 但是列表只有在按“ Enter”按钮后才会更改。 这是代码。

<tr>
        <td><input type = "text" [(ngModel)] = "writerSuggest" (change) = "getWriterList($event)" /></td>
</tr>
<tr *ngFor="let writers of writerListShow">
        <td style="cursor: pointer;" (click) = "onWriterClick(writers.name)">{{writers.name}}</td>
</tr>
<tr>
        <td *ngIf = 'writerErr' >No writers with given name</td>
</tr>

3 个答案:

答案 0 :(得分:1)

您可以使用ngmodelChange事件。

<td><input type = "text" [ngModel] = "writerSuggest" (ngModelChange) = "getWriterList($event)" /></td>

答案 1 :(得分:1)

使用ng modelChange来检测绑定变量值的变化。 喜欢

public class HotelViewModel: ObservableRangeCollection < RoomViewModel > , INotifyPropertyChanged {  
// It's a backup variable for storing CountryViewModel objects  
private ObservableRangeCollection < RoomViewModel > hotelRooms = new ObservableRangeCollection < RoomViewModel > ();  
public HotelViewModel(Hotel hotel, bool expanded = false) {  
    Hotel = hotel;  
    _expanded = expanded;  
    foreach(Room room in hotel.Rooms) {  
        Add(new RoomViewModel(room));  
    }  
    if (expanded) AddRange(hotelRooms);  
}  
public HotelViewModel() {}  
private bool _expanded;  
public bool Expanded {  
    get {  
        return _expanded;  
    }  
    set {  
        if (_expanded != value) {  
            _expanded = value;  
            OnPropertyChanged(new PropertyChangedEventArgs("Expanded"));  
            OnPropertyChanged(new PropertyChangedEventArgs("StateIcon"));  
            if (_expanded) {  
                AddRange(hotelRooms);  
            } else {  
                Clear();  
            }  
        }  
    }  
}  
public string StateIcon {  
    get {  
        if (Expanded) {  
            return "arrow_a.png";  
        } else {  
            return "arrow_b.png";  
        }  
    }  
}  
public string Name {  
    get {  
        return Hotel.Name;  
    }  
}  
public Hotel Hotel {  
    get;  
    set;  
}  
}  

答案 2 :(得分:1)

您可以尝试ngModelChange

example