角型テンプレート一方向データバインディング

Question

HTMLフォームのデフォルト値に一方向バインドしようとしています。

export class AuthAdminComponent implements OnInit { 

    public authenticated = false; 
    public connection: String 
    public username: string; 
    public password: string; 
    public token: string; 

    constructor(private authService: AuthService, private router: Router) { 

    } 

    ngOnInit() { 
    if(localStorage.getItem('adminUser')) { 
     let data = JSON.parse(localStorage.getItem('adminUser')); 
     this.connection = data.connection; 
     this.username = data.username; 
     this.password = data.password; } 
    } 
} 

はその後、私の形で、私はそのような接続として、これらのプロパティに一方向バインドしようとしています：

私のコンポーネントは、ローカルストレージから初期化されている接続文字列を持っています。ただし、[object Object]を返します。私は、実際の値を取得する方法を見つけ出すように見えることはできません。

<label for="connection">Connection</label> 
      <input 
      class="input__username" 
      type="text" 
      name="connection" 
      required 
      [ngModel]="connection" 
      #connection="ngModel" /> 
      <span *ngIf="!connection.valid && connection.touched">Please enter a valid connection string.</span> 

私はそれは私が誤解してるという単純なものだと確信しています。誰かが私に行方不明を説明することができれば、私はそれを高く評価します。ありがとう！

Answer 1

あなたの問題は次のとおりです。
ngModelをあなたのクラスで定義された変数である接続にバインドしようとしています。
一方、入力要素の参照変数として#connectionを定義しました。
ngModelはこの変数にバインドされ、クラスで定義された変数にはバインドされません。
#connectionから#connectに名前を変更することもできます（または、クラス内でconnectionの名前を変更し、テンプレートの名前が変更された変数にngModelをバインドすることもできます）。
これで問題は解決します。