在Angular/Typescript中使用$ watch

我有一個選擇框，我需要監視更改，以便可以動態更改第二個選擇框的值。

<select ng-model="$ctrl.primaryValue" 
     ng-options="key as value for (key, value) in $ctrl.primaryOptions"> 
</select> 
<br /><br /> 
<select ng-model="$ctrl.secondaryValue" 
     ng-options="key as value for (key, value) in $ctrl.secondaryOptions"> 
</select>

如何將我最好的手錶$ ctrl.primaryValue並根據其他$ ctrl.secondaryOptions該負載。

來源

2016-05-31 turoni

@Joe克萊我沒有從一開始做這個項目，所以我仍然不知道它的一些東西，但我想我是用角2.0。那肯定不是真的，因爲我可以使用$ watch嗎？如果不是，你可能會分享一個鏈接到Angular 2.0中用於此目的的內容嗎？ – turoni

如果你使用'$ watch'，你肯定會使用Angular 1 - 在Angular 2中這個服務根本不存在！請參閱http://stackoverflow.com/questions/34569094/what-is-the-angular2-equivalent-to-an-angularjs-watch的答案以獲取更多關於「$ watch」已被替換的信息。對不起，驅動編輯，應該給你一些更多的信息！ –

@turoni我認爲你不需要$ watch作爲ng-options/ng-repeat總是觸發摘要循環，只要你的應用程序中發生了點擊事件。 – Ajay

使用select變量的ng-change屬性，並調用相應的函數，它將進一步更新secondary選擇中顯示的值。

<select ng-model="$ctrl.primaryValue" 
     ng-options="key as value for (key, value) in $ctrl.primaryOptions" ng-change="$ctrl.updateSecondaryOptions()"> 
</select>

內部控制

public updateSecondaryOptions(): void { 
    // update the secondary options value here 
}

由於點擊事件觸發消化週期的變化會自動得到反映二次選擇標籤內。

問候

阿賈伊

來源

2016-05-31 10:02:11 Ajay

謝謝，這確實是一個更好的解決方案。 – turoni

在我的解決方案中，我首先在我的控制器中注入了$ scope。

private dropdownService: DropdownService; 
private $scope: any; 

public static $inject: string[] = [DropdownService.IID, '$scope']; 

constructor(dropdownService: DropdownService, $scope: any) { 
    this.dropdownService = dropdownService; 
    this.$scope = $scope;

然後還在裏面這個構造附加一個$手錶這個範圍

this.$scope.$watch(
    (): string => { 
     return this.primaryValue; 
    }, 
    (newValue: string, oldValue: string):void => { 
     console.log("the value ", oldValue, " got replaced with ", newValue); 
    } 
);

第一個函數返回一個值，角度會比較，如果它改變執行第二功能。

希望這會幫助別人。

來源

2016-05-31 08:48:26 turoni

另請參閱此問題：Angularjs: 'controller as syntax' and $watch。

$scope.$watch("$ctrl.primaryValue", (value) => { 
    console.log(value) 
});

來源

2016-05-31 09:08:28

謝謝我忘了「」標記，從而使用該函數。總而言之，這與普通的Angularjs實現沒有什麼不同，但是由於翻譯打字稿有時很難讓我決定分享。 – turoni

在Angular/Typescript中使用$ watch

回答

相關問題