Je voudrais envoyer des données sélectionnées à partir de mon autre composant (variable dans le fichier .ts)

.html:

<div class="liste">
                <select class="form-control" name="Container" (change)="selectChangeHandler($event)">
                    <option disabled selected value> -- select an Container -- </option>
                    <option *ngFor="let v of values;let i = index" [value]="i">
                        {{v.Name}}
                    </option>
                </select>
            </div>

            <div class="tableau" *ngIf="show" >
                <table align="center">
                    <tr align="center"><b>{{selectedValue.Name}}</b></tr>
                    <tr align="center"><td>Matricule: {{selectedValue.Matricule}}</td></tr>
                    <tr align="center"><td>Material: {{selectedValue.Material}}</td></tr>

        <div class="modal-body">
            <app-heat-local> </app-heat-local>
        </div>

Comment puis-je obtenir de la valeur pour ce composant en utilisant pour envoyer mes données dans ce composant ?

Un autre composant .html (heat-local):

<h6 class="container-name">{{selectedValue.Name}}</h6>

Mon fichier .ts :

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Cell} from 'app/data/cell';

@Component({
    selector: 'app-heat-global',
    templateUrl: './heat-global.component.html',
    styleUrls: ['./heat-global.component.css'],
    providers: [HeatService]
})

export class HeatGlobalComponent implements OnInit{

selectedValue = {
        Name: '',
        Matricule: '',
        Material:'',
        Quantity:'',
        Coordonates:'',
    }
    values = [{
        Name: "Container A",
        Matricule: "ABC",
1
programmation1994 7 févr. 2020 à 13:19

1 réponse

Meilleure réponse

D'après la question, il semble qu'il pourrait être possible de le résoudre de cette façon.

Vous pouvez définir la valeur d'une option sélectionnée sur la propriété à l'intérieur de selectChangeHandler()

selectChangeHandler(event) {
  this.currentValue = event.target.value;
}

Pour l'obtenir à l'intérieur de app-heat-local

<div class="modal-body">
  <app-heat-local [value]="currentValue"> </app-heat-local>
</div>

Pour pouvoir définir l'attribut [value], vous devez définir la propriété @Input() à l'intérieur de HeatLocalComponent

Vous pouvez utiliser @Input() pour y parvenir.

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-heat-local',
  templateUrl: './heat-local.component.html',
  styleUrls: ['./heat-local.component.scss']
})
export class HeatLocalComponent {
  @Input() value: number;
}

Pour afficher la valeur dans heat-local.component.html vous pouvez utiliser l'interpolation

<h6 class="container-name">{{value}}</h6>

Vous pouvez en savoir plus sur l'interaction de composant

Mise à jour

Pour recevoir le nom au lieu de l'index, changez simplement la valeur de i qui est l'index en v.Name. {{v.Nom}}

Ou vous pouvez fournir l'objet entier

<option *ngFor="let v of values;let i = index" [value]="v">
   {{v.Name}}
</option>

Faites attention au type que vous spécifiez ici. Dans la partie précédente, le type number est spécifié, il ne prendra donc rien d'autre que le nombre

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-heat-local',
  templateUrl: './heat-local.component.html',
  styleUrls: ['./heat-local.component.scss']
})
export class HeatLocalComponent {
  @Input() value: string // <== Here you can specify the type by TS type
}

string sera utilisé juste lorsque la valeur d'une option est une chaîne, si vous voulez envoyer l'objet entier, changez-le en @Input() value: any ou définissez votre propre interface

1
Josef Katič 8 févr. 2020 à 10:49