J'ai une sélection dynamique, mais je ne sais pas comment afficher les valeurs sélectionnées à la vue. Je suis en difficulté car apparemment, je ne peux pas créer un événement de clic sur l'option et je ne sais pas accéder à l'option via l'événement Cliquez sur la balise.
Voici le HTML: P>
import { Component, OnInit } from '@angular/core';
import { DataFetchingService } from '../shared/data-fetching.service';
import { Transaction } from '../shared/transaction.model';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-transactions',
templateUrl: './transactions.component.html',
styleUrls: ['./transactions.component.css']
})
export class TransactionsComponent implements OnInit {
result: Transaction[]
transactions: Transaction[]
transactionCategories: Set<string>
catSelection: FormGroup;
constructor(private dfService: DataFetchingService) { }
ngOnInit() {
this.catSelection = new FormGroup({
'transactionControl': new FormControl(null)})
this.loadPosts()
}
loadPosts() {
this.dfService.fetchData().subscribe(
posts=>{
this.transactions=posts;
this.transactionCategories = new Set<string>(posts.map(p => p.category))
console.log(this.transactionCategories)
console.log(this.transactions)
}
)
}
onDisplayCategory() {
console.log("change works")
}
}
3 Réponses :
Vous pouvez utiliser la liaison bidirectionnelle de l'angulaire pour cela.
Utiliser [(NGModel)] = "sélectionnéCategory" code> sur votre Sélectionnez CODE>, puis utilisez SOCIÉTÉCATEGORY CODE> Dans votre fichier onDisplayCategory() {
console.log("change works");
console.log(this.selectedCategory)
}
Vous pouvez obtenir vos valeurs déroulantes sélectionnées comme ci-dessous.
OndisplayCategory () {
console.log ("Modifier les travaux");
console.log (ceci.catuselection.value.transactioncontrol);
}
Vous pouvez utiliser @input strong> et @UPUT STRY> pour soumettre la valeur sélectionnée dans la liste déroulante (en enfantine transactions-edit.component.ts em> ) et montrez-le (dans les points parent transactions.component.ts em>). Pour ce faire, vous modifiez probablement un peu dans vos codes p> modifications de transactions.component.html em> p> ajoutez une méthode supplémentaire dans transactions.ts em> p> Modifications de transactions-EDUT-EDIT.TS EM> P> import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { DataStorageService } from '../../shared/data-storage.service';
import { Transaction } from '../../shared/transaction.model';
@Component({
selector: 'app-transactions-edit',
templateUrl: './transactions-edit.component.html',
styleUrls: ['./transactions-edit.component.css']
})
export class TransactionsEditComponent implements OnInit {
@Output() createPostEvent = new EventEmitter()
constructor(private dsService: DataStorageService) { }
ngOnInit() {
}
onCreatePost(postData: Transaction) {
this.dsService
.createAndStorePost(postData.name, postData.amount, postData.category)
.subscribe(responseData => {
console.log(postData)
this.createPostEvent.emit(postData)
})
}
}
Hey! Votre exemple fonctionne bien sur la modification de la valeur de la sélection. Qui est super cool au fait. Mais mon intention était d'afficher la liste basée sur la catégorie choisie sur Select. Désolé si je n'étais pas clair. :)
Voulez-vous filtrer la liste des messages dans budget-dfc78.firebaseo.com/posts.json où la catégorie de catégorie == sélectionnée dans le formulaire?
Oui. Les messages ci-dessus m'ont dit comment saisir la valeur de Select. Je sais aussi comment filtrer la liste "manuellement", simplement créer un tableau pour chaque catégorie. Mais si j'ai 1000 catégories, j'ai besoin d'une approche élégante, il suffit de filtrer basé sur la valeur de Select.
J'ai mis à jour le code, pouvez-vous vérifier. J'espère que cela vous aidera. Stackblitz.com/edit/angular-y3w7YV
Il est agréable d'obtenir des commentaires de votre part @Pablo Aguirre de Souza si la dernière mise à jour vous satisfait. Merci.
Désolé, j'étais parti. Votre solution fonctionne, mais légèrement différente de ce que j'ai voulu. Je voulais récupérer les données indépendamment des nouvelles données à la base de données. Consultez ma solution: Stackblitz.com/edit/angular-6ni1pg
Bonjour, désolé je ne pouvais pas accéder au budget-dfc78.firebaseio.com/posts.json4/a > plus. L'erreur 401 a été renvoyée.