fix(module:grid): fix gutter zero

close NG-ZORRO#5435
vthinkxie · Jun 16, 2020 · baf6fae · baf6fae
1 parent 182e790
commit baf6fae
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git 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
@@ -38,25 +38,25 @@ 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]) {
             results[index] = g![bp] as number;
           }
         });
       } 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(