From baf6faed129f37ae0463f37226f07c1a05591d94 Mon Sep 17 00:00:00 2001
From: vthinkxie <yadong.xyd@alibaba-inc.com>
Date: Tue, 16 Jun 2020 17:35:23 +0800
Subject: [PATCH] fix(module:grid): fix gutter zero close #5435

---
 components/grid/col.directive.ts | 18 ++++++++----------
 components/grid/row.directive.ts | 32 +++++++++++++++-----------------
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/components/grid/col.directive.ts b/components/grid/col.directive.ts
index 9bb828a5deb..4fc38468520 100644
--- a/components/grid/col.directive.ts
+++ b/components/grid/col.directive.ts
@@ -131,18 +131,16 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   ngAfterViewInit(): void {
     if (this.nzRowDirective) {
       this.nzRowDirective.actualGutter$.pipe(takeUntil(this.destroy$)).subscribe(([horizontalGutter, verticalGutter]) => {
-        const renderGutter = (name: string, gutter: number) => {
+        const renderGutter = (name: string, gutter: number | null) => {
           const nativeElement = this.elementRef.nativeElement;
-          this.renderer.setStyle(nativeElement, name, `${gutter / 2}px`);
+          if (gutter !== null) {
+            this.renderer.setStyle(nativeElement, name, `${gutter / 2}px`);
+          }
         };
-        if (horizontalGutter > 0) {
-          renderGutter('padding-left', horizontalGutter);
-          renderGutter('padding-right', horizontalGutter);
-        }
-        if (verticalGutter > 0) {
-          renderGutter('padding-top', verticalGutter);
-          renderGutter('padding-bottom', verticalGutter);
-        }
+        renderGutter('padding-left', horizontalGutter);
+        renderGutter('padding-right', horizontalGutter);
+        renderGutter('padding-top', verticalGutter);
+        renderGutter('padding-bottom', verticalGutter);
       });
     }
   }
diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts
index a0d731c2d85..97e15aae1ce 100644
--- a/components/grid/row.directive.ts
+++ b/components/grid/row.directive.ts
@@ -38,17 +38,17 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   @Input() nzJustify: NzJustify | null = null;
   @Input() nzGutter: number | IndexableObject | [number, number] | [IndexableObject, IndexableObject] | null = null;
 
-  readonly actualGutter$ = new ReplaySubject<[number, number]>(1);
+  readonly actualGutter$ = new ReplaySubject<[number | null, number | null]>(1);
 
   private readonly destroy$ = new Subject();
 
-  getGutter(): [number, number] {
-    const results: [number, number] = [0, 0];
+  getGutter(): [number | null, number | null] {
+    const results: [number | null, number | null] = [null, null];
     const gutter = this.nzGutter || 0;
-    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
+    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, null];
     normalizedGutter.forEach((g, index) => {
-      if (typeof g === 'object') {
-        results[index] = 0;
+      if (typeof g === 'object' && g !== null) {
+        results[index] = null;
         Object.keys(gridResponsiveMap).map((screen: string) => {
           const bp = screen as NzBreakpointKey;
           if (this.mediaMatcher.matchMedia(gridResponsiveMap[bp]).matches && g[bp]) {
@@ -56,7 +56,7 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
           }
         });
       } else {
-        results[index] = g || 0;
+        results[index] = g || null;
       }
     });
     return results;
@@ -65,18 +65,16 @@ export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   setGutterStyle(): void {
     const [horizontalGutter, verticalGutter] = this.getGutter();
     this.actualGutter$.next([horizontalGutter, verticalGutter]);
-    const renderGutter = (name: string, gutter: number) => {
+    const renderGutter = (name: string, gutter: number | null) => {
       const nativeElement = this.elementRef.nativeElement;
-      this.renderer.setStyle(nativeElement, name, `-${gutter / 2}px`);
+      if (gutter !== null) {
+        this.renderer.setStyle(nativeElement, name, `-${gutter / 2}px`);
+      }
     };
-    if (horizontalGutter > 0) {
-      renderGutter('margin-left', horizontalGutter);
-      renderGutter('margin-right', horizontalGutter);
-    }
-    if (verticalGutter > 0) {
-      renderGutter('margin-top', verticalGutter);
-      renderGutter('margin-bottom', verticalGutter);
-    }
+    renderGutter('margin-left', horizontalGutter);
+    renderGutter('margin-right', horizontalGutter);
+    renderGutter('margin-top', verticalGutter);
+    renderGutter('margin-bottom', verticalGutter);
   }
 
   constructor(