J'utilise angular7. Créez simplement une zone de texte et alertez cette valeur de zone de texte. Mais je ne peux pas obtenir les valeurs au format dactylographié. S'il vous plaît, aidez-moi les gars à continuer cette étape.
about.component.html
undefined
about.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
name : string;
constructor() { }
ngOnInit() {
}
lgbtnclick(){
alert(this.name)
console.log(Error)
}
}
message d'alerte:
<input type="text" name="username"> <button (click)="lgbtnclick()" type="button" name="button"></button>
3 Réponses :
Définissez la valeur par défaut sur "" pour la propriété name et utilisez [(ngModel)] = "name" pour le type d'entrée
Code HTML:
import { Component } from '@angular/core';
@Component({
selector: 'input-overview-example',
styleUrls: ['input-overview-example.css'],
templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
name: string="";
constructor() { }
ngOnInit() {
}
lgbtnclick() {
alert(this.name)
console.log(Error)
}
}
Code TS:
<mat-form-field class="example-full-width">
<input matInput placeholder="Enter name" [(ngModel)]="name" >
</mat-form-field>
<button (click)="lgbtnclick()" type="button" name="button">Test</button>
Il affiche le journal de la console ƒ Error () {[native code]}
Supprimez ceci: console.log (Erreur)
Sans rien taper, il renvoie toujours une chaîne vide
J'utilise votre code ce que vous entrez dans dev live server. ce même code dans ma page
Je viens de le fourcher et de partager le lien
Y a-t-il un appel API?
Afficher le code .ts pour le composant à propos
Je suis attaché ma capture d'écran ci-dessous s'il vous plaît trouver celle-là
import {Component, OnInit} depuis '@ angular / core'; @Component ({selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss']}) classe d'exportation AboutComponent {name: string = ""; constructor () {} ngOnInit () {} lgbtnclick () {alert (this.name) //console.log(Error)}}
Cela peut parfaitement être un problème lié à ng serve >
Comment puis-je réparer cela?
si possible, partagez l'identifiant de n'importe quel bureau.
Je ne sais pas comment faire ça
je viens d'essayer cette commande alert ({name}) son alerte d'affichage [objet objet]
La liaison de données Angulars diffère de jQuery ou de JavaScript brut et ne fonctionnera pas avec l'attribut "name" de l'élément input . Veuillez consulter Reactive Forms ou Formulaires pilotés par modèle .
Dans votre exemple, le formulaire piloté par modèle pourrait être appliqué. Angular fonctionne en liant la valeur d'une entrée à celle d'une variable d'instance de la classe d'hébergement avec [(ngModel)] = "name" . Bien qu'il soit déconseillé de le faire, [ et ( font référence à une propriété AND liaison d'événement (liaison de données bidirectionnelle). En savoir plus ici . p>
Pour utiliser la directive ngModel , vous devez inclure le FormsModule dans votre module respectif.
Le code HTML:
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
styleUrls: ['about.component.css'],
templateUrl: 'about.component.html',
})
export class AboutComponent {
name: string="";
constructor() { }
lgbtnclick() {
alert(this.name)
console.log(Error)
}
}
Le code Typecript:
<input matInput placeholder="Enter name" [(ngModel)]="name" > <button (click)="lgbtnclick()" type="button" name="button"></button>
Ceci apparaît également comme ceci ƒ Error () {[native code]}
Veuillez supprimer cette ligne console.log (Erreur) et publier la sortie complète de la console s'il y a des erreurs.
Puis-je savoir pourquoi il s'affiche comme ce problème ** ƒ Error () {[native code]} **?
Parce que Error dans console.log (Error) évalue apparemment ** ƒ Error () {[native code]} **
Bonjour, l'attribut de nom dans votre code html ne se lie pas réellement à votre fichier dactylographié. C'est juste un attribut sur le HTMLElement. Si vous voulez cette valeur, il existe en fait de nombreuses options. La solution la plus simple ici consiste simplement à attacher la variable name à l'attribut value de l'entrée ou à good'ol ngModel (assurez-vous d'importer ReactiveFormsModule et FormsModule dans votre AppModule)
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-about",
templateUrl: "./about.component.html",
styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
name: string;
constructor() {}
ngOnInit() {}
lgbtnclick() {
alert(this.name);
console.log(Error);
}
}
<input type="text" name="username" [(ngModel)]="name"> <button (click)="lgbtnclick()" type="button" name="button"></button>
XXX
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-about",
templateUrl: "./about.component.html",
styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
name: string;
constructor() {}
ngOnInit() {}
lgbtnclick() {
alert(this.name);
console.log(Error);
}
}
Maintenant aussi afficher vide
quelle méthode as-tu utilisée? ngModel ou la valeur?
Je n'utilise pas la méthode uniquement ces deux lignes dans un fichier html.
Les gars, je suis toujours confronté au même problème.
chaussure nous le html
C'est maintenant visible
utilisez
ngmodelpour lier la valeur de la zone de texte à la variable de nom .name n'est pas défini, il n'est pas initialiséEssayez:
Pouvez-vous donner des suggestions alors comment implémenter en tapuscrit?
Découvrez ceci: stackblitz.com/edit/angular-ga6rry
@PrashantPimpale Quels sont les packages de dépendances du module pour installer le système?
Incapable de comprendre la question
Mon doute est de savoir ce que le package doit installer dans mon système ?.