異なるパラメータ - NgSwitch？を入力すると、あるパラメータを特定の値に設定しますか？

Question

データベースに値を追加または編集できるアプリケーションがあります。

1つのパラメータを何かに設定すると（デフォルトでは空です）、2番目のパラメータが特定の値に設定されるようにしたいと思います。

私は実際に何をしようとしているのさらなる説明：

HTMLコード：

<form class=form-group> 
    <td><label>Status Code</label></td> 
    <input type="text" #StatusCode (ngModel)="StatusCodes" value="{{StatusCodes}}"> 
</form>           

<form class=form-group> 
    <td><label>Eta</label></td> 
    <input type="text" #Eta (ngModel)="Etas" value="{{Etas}}"> 
</form> 
<form class=form-group> 
    <td><label>Etd</label></td> 
    <input type="text" #Etd (ngModel)="Etds" value="{{Etds}}"> 
</form> 
<form class=form-group> 
    <td><label>Ata</label></td> 
    <input type="text" #Ata (ngModel)="Atas" value="{{Atas}}"> 
</form> 
<form class=form-group> 
    <td><label>Atd</label></td> 
    <input type="text" #Atd (ngModel)="Atds" value="{{Atds}}"> 
</form> 

StatusCodesは「を発表」とだけEta指定した値（他の3を持っているのデフォルト値を持っています空です）。 Ataの値を入力すると、StatusCodesの値を自動的に "inport"に設定します。

私はこの状況でngswitchを使うことができると思っていますが、どうすればよいか分かりません。 この場合の構文は何ですか？

この問題を解決する方法がある場合は、これをどのように達成するかを教えてください。

Answer 1

ngSwitchは基本的にはngIfの拡張版なので、DOM要素を表示したり隠したりするのに役立ちます。これまでのところ、最も堅牢なオプションは、イベントでTypeScriptで明示的に処理することです。例えばので

、のようなもの：

<form class=form-group> 
    <td><label>Status Code</label></td> 
    <input type="text" #StatusCode (ngModel)="StatusCodes" value="{{StatusCodes}}"> 
</form>           

<form class=form-group> 
    <td><label>Eta</label></td> 
    <input type="text" #Eta (ngModel)="Etas" value="{{Etas}}"> 
</form> 
<form class=form-group> 
    <td><label>Etd</label></td> 
    <input type="text" #Etd (ngModel)="Etds" value="{{Etds}}"> 
</form> 
<form class=form-group> 
    <td><label>Ata</label></td> 
    <input type="text" #Ata (ngModel)="Atas" value="{{Atas}}" (change)="updateStatusCode('ata')"> 
</form> 
<form class=form-group> 
    <td><label>Atd</label></td> 
    <input type="text" #Atd (ngModel)="Atds" value="{{Atds}}"> 
</form> 

そして：

updateStatusCode(type) { 
    switch (type) { 
    case 'ata': 
     /* set status code */ 
     this.StatusCodes = 'import'; 
     break; 
    case 'atd': 
     /* etc */ 
     break; 
    case 'eta': 
     /* etc */ 
     break; 
    case 'etd': 
     /* etc */ 
     break; 
    } 
} 

あなたが」（これは、超エレガントではないのですが、それはテストして変更することが最も簡単で、最も簡単になりますユニットテストを書くつもりです）。

私は上記のコードを実行していませんので、少し修正する必要があるかもしれません。