mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(grid-list): better handling of negative columns (#12939)
Currently if, by any chance, assigns a negative number to the `cols` of a grid list, they'll get a cryptic error like `Invalid array length`, because down-the-line we use that number to create an array. These changes ensure that the value is always a positive number.
This commit is contained in:
committed by
Jeremy Elbourn
parent
e24f24a6a0
commit
cfb83a0ebc
@@ -1,5 +1,5 @@
|
||||
import {TestBed, ComponentFixture} from '@angular/core/testing';
|
||||
import {Component, DebugElement, Type} from '@angular/core';
|
||||
import {Component, DebugElement, Type, ViewChild} from '@angular/core';
|
||||
import {By} from '@angular/platform-browser';
|
||||
import {MatGridList, MatGridListModule} from './index';
|
||||
import {MatGridTile, MatGridTileText} from './grid-tile';
|
||||
@@ -34,6 +34,20 @@ describe('MatGridList', () => {
|
||||
expect(() => fixture.detectChanges()).toThrowError(/tile with colspan 5 is wider than grid/);
|
||||
});
|
||||
|
||||
it('should set the columns to zero if a negative number is passed in', () => {
|
||||
const fixture = createComponent(GridListWithDynamicCols);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.gridList.cols).toBe(2);
|
||||
|
||||
expect(() => {
|
||||
fixture.componentInstance.cols = -2;
|
||||
fixture.detectChanges();
|
||||
}).not.toThrow();
|
||||
|
||||
expect(fixture.componentInstance.gridList.cols).toBe(1);
|
||||
});
|
||||
|
||||
it('should default to 1:1 row height if undefined ', () => {
|
||||
const fixture = createComponent(GridListWithUnspecifiedRowHeight);
|
||||
fixture.detectChanges();
|
||||
@@ -334,6 +348,12 @@ class GridListWithInvalidRowHeightRatio { }
|
||||
'<mat-grid-list cols="4"><mat-grid-tile colspan="5"></mat-grid-tile></mat-grid-list>'})
|
||||
class GridListWithTooWideColspan { }
|
||||
|
||||
@Component({template: '<mat-grid-list [cols]="cols"></mat-grid-list>'})
|
||||
class GridListWithDynamicCols {
|
||||
@ViewChild(MatGridList) gridList: MatGridList;
|
||||
cols = 2;
|
||||
}
|
||||
|
||||
@Component({template: `
|
||||
<div style="width:200px">
|
||||
<mat-grid-list cols="1">
|
||||
|
||||
@@ -70,7 +70,9 @@ export class MatGridList implements OnInit, AfterContentChecked {
|
||||
/** Amount of columns in the grid list. */
|
||||
@Input()
|
||||
get cols(): number { return this._cols; }
|
||||
set cols(value: number) { this._cols = Math.round(coerceNumberProperty(value)); }
|
||||
set cols(value: number) {
|
||||
this._cols = Math.max(1, Math.round(coerceNumberProperty(value)));
|
||||
}
|
||||
|
||||
/** Size of the grid list's gutter in pixels. */
|
||||
@Input()
|
||||
|
||||
Reference in New Issue
Block a user