選択した要素の最初の部分 (" " 文字の前) がドロップダウン要素の最初の部分 (" " 文字の前) と一致する場合、クラスはフォントの色を変更しません。一致しない場合、クラスが起動し、フォントの色が変更されます。
名前の最初の部分が選択した要素の最初の部分と一致しない場合、ロジックは要素を動的に有効にする必要があります。
これは、角材マット選択を使用してドロップダウンを生成するオブジェクトの配列です。
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-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
}
}
}
最初の要素を選択すると、最後の 2 つの要素の色が変更されます。
このコードは正しく機能していません。親切に助けてください
または、これを達成するためのより良い方法