角度5的定制管道不起作用

时间:2018-06-07 08:40:44

标签: javascript typescript angular5 angular-pipe angular-material-5

这是我的对象数组:

emp[
    {"id":1001,"name":"robin_delhi"},
    {"id":1002,"name":"robin_mumbai"},
    {"id":1003,"name":"robin_bang"},
    {"id":1004,"name":"sushil_delhi"},
    {"id":1005,"name":"sushil_mumbai"},
]

这是我的HTML模板,我在通过选择角度材料的选择组件下拉显示emp对象:

<mat-form-field>
    <mat-select [(ngModel)]="emp" [(value)]="sel" placeholder="Employee
        [formControl]="toppings" multiple required>
        <mat-option  *ngFor="let p of emp | proDisable:emp:sel; let p = index;" [value]="p">
            {{p.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

我想在选择特定的emp名称时,它将与剩余的元素(特殊字符“_”的第一部分)匹配,如果匹配,它将像往常一样显示其他禁用。

这是我的自定义管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'proDisable'
})

export class ProDisablePipe implements PipeTransform {    
    transform(value:any, data:any, sel:any) : any {
        if(!sel)
        {
            return value;
        }
        else
        {
            let nval:any;

            for(var i=0; i<data.length; i++) 
            {
                for(var j=0; j<sel.length; j++)
                {
                    if ((i['name'].substring(0, i['name'].indexOf("_")))==(sel['name'].substring(0, sel['name'].indexOf("_"))))
                    {
                        nval= "class='disable'"+value;
                    }
                    else 
                    {
                        nval= "class='enable'"+value;
                    }
                } 
            }

            return nval;
        }
    }
}

如果我选择第一个元素,那么最后两个元素将被禁用。

请帮助如何实现这一目标或更好的方法。

0 个答案:

没有答案