web-dev-qa-db-ja.com

Angular 2マテリアル入力はプレースホルダーを動的に変更します

入力プレースホルダーのテキストを動的に変更したい。 console.logはすでに更新された文字列を提供しますが、インターフェースは更新されないため、古いプレースホルダーが残ります。インターフェイスに変更を認識させるにはどうすればよいですか？

document.getElementById(this.implicKey).setAttribute('placeholder', options[i].implication);

console.log(document.getElementById(this.implicKey).getAttribute('placeholder'));
javascriptangulartypescriptangular-materialplaceholder
9
maidi

このように入力プレースホルダーを動的に変更できます

<md-input-container class="demo-full-width">
                <input mdInput [(ngModel)]="firstname" placeholder="{{somePlaceholder}}" name="firstname" required>
                <md-error>This field is required</md-error>
            </md-input-container>

component.ts

somePlaceholder : string = "new value";

これで、クラス内の任意の場所でsomePlaceholder値を変更できます。

10
CharanRoot

プロパティバインディングを使用してそれを行うことができます。

HTMLでは、角括弧を使用します。

<input formControlName="events" type="text" [placeholder]="newPlaceHolder">

TypeScriptファイルで、プロパティを定義します。

newPlaceHolder: string = "original place holder";

次に、プロパティ値を変更します。

newPlaceHolder= "my new place holder";
3
EQuadrado