Question

如果所选元素的第一部分（在“”字符之前）与下拉元素的第一部分（在“”字符之前）匹配，则该类不会更改字体颜色，如果不匹配然后类会触发，字体颜色会改变。

逻辑需要动态启用禁用元素，如果名称的第一部分与所选元素的第一部分不匹配。

这是我的对象数组，它使用角度材料选择产生下拉。

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 select

显示下拉列表

<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
                }
             }
            }

如果有人选择第一个元素，则最后两个元素颜色将被更改。

此代码无法正常使用，请帮助

或者更好的方法来实现这个目标

Answer 1

你的选择更改功能是hideEmp（），你试图触发hideProjects（）吗？

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

不要将索引与其他变量混合。

你在component.html中调用hideProjects（）的地方？

以角度5

1 个答案: