feat: Business Requirement Info: Render the page according to whether there is a value of 5G tast

Change-Id: I08008595568de563625c95ba75cb61d0dda832fa
Issue-ID: USECASEUI-444
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

2 files changed, 32 insertions, 5 deletions

diff --git a/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.html b/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.html
index 08edd8d6..8931277b 100644
--- a/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.html
+++ b/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.html
@@ -38,7 +38,7 @@
 
 <nz-list
 	class="taskmodel_list"
-	[nzDataSource]="businessRequirement"
+	[nzDataSource]="requirement"
 	nzBordered
 	[nzHeader]="businessItemTitle"
 	[nzFooter]="null"
@@ -53,7 +53,7 @@
 			nzType="flex"
 			nzJustify="start"
 			[nzGutter]="8"
-			*ngFor="let list of businessList"
+			*ngFor="let list of businessListAfterSorting"
 		>
 			<div
 				nz-col
@@ -68,7 +68,7 @@
 					<nz-tag *ngFor="let value of item[ite.key]">
 						{{value}}
 					</nz-tag>
-				</span> 
+				</span>
 			</div>
 		</nz-list-item>
 	</ng-template>
diff --git a/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.ts b/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.ts
index d718d9d3..538b08c5 100644
--- a/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.ts
+++ b/usecaseui-portal/src/app/shared/components/basic-info/basic-info.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { BUSINESS_REQUIREMENT } from '../../../../constants/constants';
+import { BUSINESS_REQUIREMENT } from '@src/constants/constants';
+import {el} from "@angular/platform-browser/testing/src/browser_util";
 @Component({
   selector: 'app-basic-info',
   templateUrl: './basic-info.component.html',
@@ -14,10 +15,36 @@ export class BasicInfoComponent implements OnInit {
 
   // 业务需求列表
   businessList: object[] = BUSINESS_REQUIREMENT;
-
+  requirement: object = [{}];
+  businessListAfterSorting: object[] = [];
   constructor() { }
 
   ngOnInit() {
+
   }
 
+    ngOnChanges() { // Business Requirement Info: Render the page according to whether there is a value
+        this.businessListAfterSorting = [];
+        this.businessList = BUSINESS_REQUIREMENT.concat([]);
+        if(this.businessRequirement && this.businessRequirement.length !== 0){
+            Object.keys(this.businessRequirement[0]).map((item,index)=>{
+                if(this.businessRequirement[0][item] !== '' && this.businessRequirement[0][item] !== null){
+                    this.requirement[0][item] = this.businessRequirement[0][item];
+
+                }else{
+                    this.businessList.map((items,indexs)=>{
+                        if(Array.isArray(items) === false && items["key"] === item){
+                            this.businessList.splice(indexs,1)
+                        }
+                    })
+                }
+            });
+            let area = this.businessList.pop();
+            for(let i=0;i<this.businessList.length-1;i+=3){
+                this.businessListAfterSorting.push(this.businessList.slice(i,i+3));
+            }
+            this.businessListAfterSorting.push(area);
+        }
+    }
+
 }