Измените цвет фона при выборе ion-select на основе выбранного значения

Question

Я использую Ioni c 5.0 и у меня есть поле выбора ионов. Мне нужно изменить фон поля в зависимости от выбранной опции.

Я пробовал несколько вещей. Моя текущая попытка в приведенном ниже коде - вставить [ngStyle] = "SetBackground (item.id)" в ion-select, но это не работает. Я также пробовал [ngStyle] = "SetBackground ($ event)". Я думал о том, чтобы как-то добавить его в (ionChange) = "OnChange ($ event)", но не мог понять, как это сделать. Похоже, мне просто нужно использовать item.id, чтобы изменить фон, но, хоть убей, я просто не могу это понять.

Вот мой HTML код. Надеюсь, этого достаточно, чтобы найти ответ.

<ion-content>

  <div id="game-board">

    <ion-img class="map-img" src="../assets/img/map-a.png"></ion-img>

    <ion-select [(ngModel)]="selectedVal" class="square" interface="popover" [ngStyle]="SetBackground(item.id)">

      <ion-select-option *ngFor="let item of data" [value]="item.id" >

        {{ item.name }}

      </ion-select-option>

    </ion-select>

  </div>

</ion-content>

И мой ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data: { id: string; name: string; }[];

  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      this.data = [
        {
          id: "transparent", name: ""
        },
        {
          id: "green", name: "Forest"
        },
        {
          id: "red", name: "Village"
        },
        {
          id: "yellow", name: "Field"
        },
        {
          id: "blue", name: "Water"
        },
        {
          id: "purple", name: "Monster"
        },
      ]
    })
  }

  SetBackground(bg) {
    let newColor = {
      'background-color': bg.target.value,
    };
    return newColor
  }

Я получаю ошибку ...

HomePage.html:12 ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateDirectives] (HomePage.html:14)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)
    at callViewAction (core.js:44637)
    at execEmbeddedViewsAction (core.js:44594)
    at checkAndUpdateView (core.js:44272)
    at callViewAction (core.js:44637)

Answer 1

<ion-select [(ngModel)]="selectedVal" class="square" interface="popover" [ngStyle]="SetBackground(item.id)">

  <ion-select-option *ngFor="let item of data" [value]="item.id" >

ваша функция SetBackground вызывается перед l oop. Так что ссылки на item.id нет.

Можно что-то вроде этого.

html

<select [ngStyle]="styleObj" (change)="SetBackground($event)">

  <option *ngFor="let item of data"  value={{item.id}}>

    {{ item.name }}

  </option>

</select>

ts

 data = [
        {
          id: "transparent", name: ""
        },
        {
          id: "green", name: "Forest"
        },
        {
          id: "red", name: "Village"
        },
        {
          id: "yellow", name: "Field"
        },
        {
          id: "blue", name: "Water"
        },
        {
          id: "purple", name: "Monster"
        },
      ];

  styleObj = {};

  SetBackground(e) {
    this.styleObj = {
      'background-color': e.target.value,
    };
  }

Answer 2

Ух! Оно работает! Большое вам спасибо, Арун!

Вот последний HTML код с включенным материалом ioni c ...

 <ion-select [(ngModel)]="selectedVal" [ngStyle]="styleObj" (ionChange)="SetBackground($event)" class="square" interface="popover">

      <ion-select-option *ngFor="let item of data" [value]="item.id" >

        {{ item.name }}

      </ion-select-option>

    </ion-select>

И ts ...

  styleObj = {};

  SetBackground(bg) {
    this.styleObj = {
      'background-color': bg.target.value,
    };
  }

Еще раз спасибо!

пс. Вот следующий шаг ...

Мне нужна сетка 11x11 этих операторов select на экране, и каждый из них имеет независимый цвет. Как бы вы go об этом?