我正在使用一個應用程式，在該應用程式中我創建了一個包含父子資料的靜態 JSON 物件陣列。我將資料顯示到下拉串列中，我想在這里實作的是我有不同的記錄，它們的狀態會有所不同，如已完成、已取消或其他。我只是使用這些狀態顯示或隱藏下拉串列中的選項。這是我的 JSON 代碼。
export const projectCardVerticalDropdown = [
{
nameSub: 'Information',
children: [
{
icon: 'i-expand',
name: 'See Expanded Project',
code: 1,
},
],
},
{
nameSub: 'Schedule',
children: [
{
icon: 'i-plus',
name: 'add a new task',
code: 2,
},
{
icon: 'i-calendar-week',
name: 'see schedule',
code: 3,
},
],
},
{
nameSub: 'Project Templates',
children: [
{
icon: 'i-copy-1',
name: 'Clone Project',
code: 4,
},
{
icon: 'i-project_stage_initiation',
name: 'Make Template From Project',
code: 5,
},
{
icon: 'i-recieved_files2',
name: 'Apply Template to this Project',
code: 6,
},
],
},
{
nameSub: 'Data',
children: [
{
icon: 'i-file-invoice-1',
name: 'see Proposal',
code: 7,
},
{
icon: 'i-images',
name: 'See Project Photos',
code: 8,
},
{
icon: 'i-mail_attachment',
name: 'See Project Files',
code: 9,
},
],
},
{
nameSub: 'Edit',
children: [
{
icon: 'i-check_mark',
name: 'mark project complete',
code: 10,
},
{
icon: 'i-edit',
name: 'Edit Project Details',
code: 11,
},
],
},
];
這是我的 Html 和 ts 代碼
verticalDropDownListData = projectCardVerticalDropdown;
<div class="f-column" *ngFor="let item of verticalDropDownListData">
<span class="hr">
<small class="">{{item.nameSub}}</small>
</span>
<button data-testid="project-card-expand" class="no-border"
(click)="selectedProjectInfo(project)" *ngFor="let items of item.children"
(click)="selectedDropdownListData(items.code,cloneModal, project)">
<i class="{{items.icon}}"></i>
<span>{{items.name}}</span>
</button>
</div>
我需要添加檢查以顯示或隱藏 JSON 物件陣列中的選項。
uj5u.com熱心網友回復：
這是可能對您有所幫助的代碼。我已經使用多種狀態實作了這一點。這是我的代碼
export const projectCardVerticalDropdown = [
{
nameSub: 'Information',
status : [
ProjectV2StatusTypes.NewLead,
ProjectV2StatusTypes.ProjectTemplate,
ProjectV2StatusTypes.ProjectTerminated,
ProjectV2StatusTypes.ProjectCompleted
],
children: [
{
icon: 'i-expand',
name: 'See Expanded Project',
code: 1,
status : [
ProjectV2StatusTypes.NewLead,
ProjectV2StatusTypes.ProjectTemplate,
ProjectV2StatusTypes.ProjectTerminated,
ProjectV2StatusTypes.ProjectCompleted
]
},
],
}
]
您可以為父記錄和子記錄保留它。如果您想為多個狀態顯示“查看展開專案”，那么您可以這樣做。定義 Enum 更適合在您想要的任何地方使用它，并且如果您需要更改任何狀態，可以輕松更改。
在您的 TS 端，請添加此代碼。
checkStatus(projectStatus: any , statusList:any[]) : boolean{
return statusList.indexOf(projectStatus) > -1;
}
它將根據條件回傳真或假。
這是您可以這樣做的 Html 代碼。
<div class="f-column" *ngFor="let item of verticalDropDownListData">
<span class="hr" >
<small class="" *ngIf="checkStatus(project?.ProjectStatusType,item.status) === true">{{item.nameSub}}</small>
</span>
<div *ngFor="let items of item.children">
<button data-testid="project-card-expand" class="no-border" *ngIf="checkStatus(project?.ProjectStatusType,items.status) === true"
(click)="selectedProjectInfo(project)"
(click)="selectedDropdownListData(items.code,cloneModal, project)">
<i class="{{items.icon}}"></i>
<span>{{items.name}}</span>
</button>
</div>
</div>
如您所見，我添加了對父項和子項記錄的檢查，它允許您通過在指定位置添加單個狀態來顯示或隱藏您想要的任何父項或子項。
uj5u.com熱心網友回復：
您需要首先將一個標志/引數添加到表示狀態的靜態 JSON 中。它可能看起來像：
export const projectCardVerticalDropdown = [
{
nameSub: 'Information',
status: 'completed' //STATUS FOR PARENT
children: [
{
icon: 'i-expand',
name: 'See Expanded Project',
code: 1,
status: 'cancelled' //STATUS FOR CHILD
},
{
icon: 'i-expand',
name: 'See Expanded Project',
code: 1,
status: 'other'
},
],
}
]
現在假設您試圖隱藏狀態為“已取消”的父級或子級，代碼將如下所示：
<ng-container *ngFor="let item of verticalDropDownListData">
<div class="f-column" *ngIf="item.status != 'cancelled'"><!-- Hiding element with cancelled status on parent level -->
<span class="hr">
<small class="">{{item.nameSub}}</small>
</span>
<ng-container *ngFor="let items of item.children">
<button data-testid="project-card-expand" class="no-border" (click)="selectedProjectInfo(project)"
(click)="selectedDropdownListData(items.code,cloneModal, project)"
*ngIf="items.status != 'cancelled'"><!-- Hiding element with cancelled status on parent level -->
<i class="{{items.icon}}"></i>
<span>{{items.name}}</span>
</button>
</ng-container>
</div>
</ng-container>
uj5u.com熱心網友回復：
您可以在回圈中使用“ng-container”來渲染子項并添加 ngIf 以檢查狀態。
<div class="f-column" *ngFor="let item of verticalDropDownListData">
<span class="hr">
<small class="">{{item.nameSub}}</small>
</span>
<ng-container *ngFor="let items of item.children" >
<button *ngIf="[Place your condition Here]" data-testid="project-card-expand" class="no-border (click)="selectedProjectInfo(project)"
(click)="selectedDropdownListData(items.code,cloneModal, project)">
<i class="{{items.icon}}"></i>
<span>{{items.name}}</span>
</button>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370253.html
下一篇：TypeError：當我運行與Angular組件相關的所有Jasmine單元測驗時，input.setFocus不是一個函式