當我console.log用戶的單選按鈕選擇，什麼日誌總是一個

Question

由於某種原因，當我console.log用戶的單選按鈕選擇，什麼日誌到控制檯總是一個落後。爲什麼會這樣？我有一個初始狀態的默認單選按鈕選項設置爲「全部」。當用戶點擊「選項A」時，控制檯的日誌記錄是初始狀態下的「全部」。當我再次點擊時，這次在「選項B」上，什麼日誌是來自先前選擇的「選項A」。爲什麼它是一個關閉？我該如何解決這個問題？

public user: User; 

    public categories = [ 
    { value: 'T', display: 'All', count: 232 }, 
    { value: 'A', display: 'Choice A', count: 22 }, 
    { value: 'B', display: 'Choice B', count: 43 }, 
    { value: 'C', display: 'Choice C', count: 35 }, 
    { value: 'D', display: 'Choice D', count: 62 }, 
    ]; 

    ngOnInit() { 
    this.user = { 
     category: this.categories[0].value 
    } 
    } 

    select(isValid: boolean, f: User) { 
    if (!isValid) return; 
    console.log(f); 
    console.log(this.user.category); 
    } 

和HTML：

<form #f="ngForm" novalidate> 
    <div class="form-group"> 
    <div class="radio" *ngFor="let category of categories"> 
     <label> 
     <input type="radio" name="category" [(ngModel)]="user.category" [value]="category.value" (click)="select(f.value, f.valid)"> 
     {{category.display}} 
     </label> 
     <span class="num-results">{{category.count}}</span> 
    </div> 
    </div> 
</form> 

Answer 1

使用ngModelChange，而不是click

(ngModelChange)="select(f.value, f.valid)" 

ngModel不得不更新形式的機會之前被處理的(click)事件。

元素上綁定的順序沒有定義事件處理的順序。