Динамически изменить класс выпадающих элементов в угловых 5 - PullRequest
Новая
       36

Динамически изменить класс выпадающих элементов в угловых 5

0 голосов
/ 07 июня 2018

Если первая часть выбранного элемента (перед символом "") совпадает с первой частью выпадающего элемента (перед символом ""), класс не изменит цвет шрифта, если не соответствует, токласс сработает и цвет шрифта изменится.

Логика должна динамически включать отключение элемента, если первая часть имени не будет совпадать с первой частью выбранного элемента.

Вот мой массивобъект, создающий выпадающий список с использованием углового выбора материала mat. 

emp[
    {"id":1001,"name":"robin_010"},
    {"id":1002,"name":"robin_020"},
    {"id":1003,"name":"robin_030"},
    {"id":1004,"name":"sushil_040"},
    {"id":1005,"name":"sushil_050"},
]

Вот мой HTML-код шаблона для отображения в выпадающем списке с использованием выбора mat 

<mat-form-field>
<mat-select [(value)]="sel (change)="hideEmp()" [formControl]="toppings" 
multiple required>
<mat-option [class.hiddenpro]="is_hide" *ngFor="let p of emp;
 [value]="p" >{{p.name}}</mat-option>
</mat-select>
</mat-form-field>

В моем CSS я добавил класс

.hiddenpro
{
    color: #ddd !important;
}

Вот мой файл .ts, я реализовал hideProjects () 

        hideEmp()
            {

       /* sel is selected object, getting from  drop down, once selected,
 to get the name property from the object, looping through for each.
    */ 

                if(this.sel && this.sel.length){
                var proc="";
                this.sel.forEach(res=>{
                proc+=res.name + " ";   // proc containing the name
                })
                }

    // Get the first part of name property in var procd (before "_")

                var procd=proc.substring(0, proc.indexOf("_"));

    //Looping emp data to compare all the values through var procd

                for(let i=0; i<this.emp.length; i++){

    //hdata containing the first part of elements  (before "_")

                var hdata=this.emp[i].name.substring(0, this.nproj[i].name.indexOf("_"));

    //comparing selected element with drop down data

                if(procd==hdata)
                {
                this.is_hide =false;  // hiddenpro will not work
                }
                else
                {
                this.is_hide =true;  //hiddenpro will work
                }
             }
            }

Если кто-то выберет первый элемент, цвет двух последних элементов будет изменен.

Этот код не работает должным образом, пожалуйста, помогите

Или любой лучший способ добиться этого

1 Ответ

0 голосов
/ 07 июня 2018

ваша функция выбора изменений является hideEmp (), и вы пытаетесь вызвать hideProjects ()? 

<mat-option [class.hiddenpro]="is_hide" *ngFor="let p of nproj;
 let i = index;" [value]="i" >{{p.name}}</mat-option>
</mat-select>

не смешиваете индекс с другими переменными.

где вы вызываете hideProjects () в component.html?

...