web-dev-qa-db-fra.com

Angular 2 Material Input change placeholder dynamically

Je souhaite modifier dynamiquement le texte de l'espace réservé d'entrée. Le console.log donne déjà la chaîne mise à jour mais l'interface ne se met pas à jour donc il reste l'ancien espace réservé. Comment puis-je faire en sorte que l'interface reconnaisse le changement?

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

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

vous pouvez modifier votre espace réservé d'entrée dynamiquement comme ceci

<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";

vous pouvez maintenant modifier la valeur de certains espaces réservés n'importe où dans la classe.

10
CharanRoot

Nous pouvons le faire en utilisant la liaison de propriété.

Dans le HTML, utilisez des crochets:

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

Dans votre fichier TypeScript, définissez la propriété:

newPlaceHolder: string = "original place holder";

Ensuite, modifiez la valeur de la propriété:

newPlaceHolder= "my new place holder";
3
EQuadrado