typescript 下拉列表值隐藏

lskq00tm  于 2022-11-30  发布在  TypeScript
关注(0)|答案(2)|浏览(243)
<div fxFlex="25" fxFlex.xs="100" class="px-8">
    <div class="form-label">Ticket Status <span class="reqSgnColor">*</span>
    </div>
    <mat-form-field appearance="outline">
        <mat-select matNativeControl required formControlName="complaint_status" filter="true" id="comp_status"
            name="comp_status" (valueChange)="closed_over_by($event)">
            <mat-option *ngFor="let status of complnt_status" [value]="status.value">{{status.viewValue}}
            </mat-option>
        </mat-select>
        <mat-error> Select Status is Required</mat-error>
    </mat-form-field>
</div>

基本上我有2个页面,在一个页面中,我需要隐藏下拉列表中的值,并在下拉列表的其他页面中显示相同的值。实际上,我有两个页面“Open-Complain”和另一个“Resolve-Complaints”,因此我有一个名为“Edit”的按钮(在两个页面上显示的内容相同)。当我进入下拉菜单中的“打开投诉”页面时,“关闭选项”不应出现,如果下拉菜单中出现“解决投诉”,则“打开选项不应在那里”。在注当点击编辑按钮时,两者都出现“仅编辑投诉页面”。选项是静态的。

wecizke3

wecizke31#

在将路由更改为另一页时,修改数组complnt_status以解决下拉选项的问题。

const indexOfObject = complnt_status.findIndex((object) => {
  return object.viewValue === 'Close';
});

if (indexOfObject !== -1) {
  complnt_status.splice(indexOfObject, 1);
}
waxmsbnn

waxmsbnn2#

一个简单快捷的解决方案是在两个不同的."ts"文件中创建两个complnt_status数组,即
对于开放投诉组件使用

complnt_status: Complaintstatus[] = [ 
    {value: 1, viewvalue: 'Open'}, 
    {value: 2, viewvalue: 'Resolved'}, 
    {value: 4, viewvalue: 'Auto-Resolution'} 
];

以及解决投诉组件的使用

complnt_status: Complaintstatus[] = [ 
    {value: 2, viewvalue: 'Resolved'}, 
    {value: 3, viewvalue: 'Close'}, 
    {value: 4, viewvalue: 'Auto-Resolution'} 
];

相关问题