Angular-下拉列表中选定值的绑定变量

时间:2018-09-27 19:22:23

标签: angular typescript binding

我想知道,如何根据下拉菜单的选定值绑定变量。 My dropdown list 现在,我已经知道了:

 "styles": [
          "src/styles.css",
          "node_modules/dragula/dist/dragula.min.css",
          "node_modules/fullcalendar/dist/fullcalendar.min.css",
          "node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
  ],
  "scripts": [
          "node_modules/moment/moment.js",
          "node_modules/dragula/dist/dragula.min.js",
          "node_modules/fullcalendar/dist/fullcalendar.min.js",
          "node_modules/fullcalendar/dist/dragula.min.js"
          "node_modules/fullcalendar-scheduler/dist/scheduler.min.js"

  ]

this.moleCaracteristique.pourcentDavoirCaracteristique始终为70。

JSON

this.moleCaracteristique.pourcentDavoirCaracteristique = this.mole.moleCaracteristiques[0].pourcentDavoirCaracteristique;

HTML

{
    "id": 1,
    "email": "test@gmail.com",
    "password": "passw",
    "nom": "titi",
    "moles": [
        {
            "id": 1,
            "commentaire": "bras droit",
            "nomFichier": "fichier",
            "moleCaracteristiques": [
                {
                    "id": 2,
                    "percentToHaveTheCaracteristic": 92,
                    "caracteristique": {
                        "id": 2,
                        "libelle": "milka"
                    }
                },
                {
                    "id": 1,
                    "percentToHaveTheCaracteristic": 70, //This is where the 70 comes from**
                    "caracteristique": {
                        "id": 1,
                        "libelle": "globule"
                    }
                }
            ]
        }
    ]
}

TS

<div class="col-xs-12 marginBottom10" >
<b>Choisissez une caracteristique :</b> 
 <select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)='onOptionsSelected($event)'>
    <option class='option' *ngFor='let option of options' [value]="option">{{option.libelle}}</option>
</select>
</div>

<div class="text-center">

<button (click)="complete()"> Soumettre</button>

</div>
<div *ngIf = "optionSelected">
{{ this.moleCaracteristique.percentToHaveTheCaracteristic}}%
</div>

当我选择“ globule”时,它必须为70,但是当我选择“ milka”时,它应为92 ... 我该如何实现?

非常感谢!

编辑

这是我从中获取的JSON

 ngOnInit() {

    this.getCaracteristiques();

  }
  onOptionSelected(event) {
    console.log(event); // option value will be sent as event
  }
  openModal() {
    this.moleCaracteristique = new Object();
    this.moleCaracteristique.percentToHaveTheCaracteristic = this.mole.moleCaracteristiques[0].percentToHaveTheCaracteristic;
    }
  }

  getCaracteristiques(){
    this.caracteristiqueService.getAll().subscribe(caracteristiques => {
      this.options = caracteristiques;
    });
  }
}

0 个答案:

没有答案