Question

找到了有关如何动态更改mat-grid-list中的列数和高度的大多数答案。

如何添加'rem'或'px'值？

这是我的component.ts代码：

 constructor(public mediaObserver: MediaObserver){
  this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
    this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
    switch(change.mqAlias) { 
      case 'xs': { 
         //statements; 
         this.desired_columns = 3;
         this.desired_rowHeight = .33;
         this.tiles = [
          { text: 'Buy and sell good stocks using conservative indicators.', cols: 3, rows: 1, color: 'lightgreen', fontSize: '1', fontFamily: 'Roboto Condensed', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh'},
          { text: 'Buying and selling ', cols: 3, rows: 2, color: '', fontSize: '.6' , fontFamily: 'Roboto Condensed', paddingTop: '5vh', marginLeft: '0vh',marginRight: '10vh'  },
          //{ text: 'Try BuySell For Free', cols: 2, rows: 1, color: '', fontSize: '1', fontFamily:  'Roboto Condensed', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh'},
          { text: 'Six', hasButton: true, cols:2, rows: 1, color: '', fontSize: '2',fontFamily: 'Rubik', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh' },
        ];
         break; 
      } 
      case 'sm': { 
         //statements; 
         this.desired_columns = 5;
         this.desired_rowHeight = .33;
         console.log("Expecting sm, getting ", change.mqAlias);
         this.tiles = [
          { text: '', cols: 5, rows: 1, color: '', fontSize: '1', fontFamily: 'Rubik', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh', },
          { text: 'Buy and sell good stocks using conservative indicators.', cols: 2, rows: 1, color: 'lightgreen', fontSize: '1', fontFamily: 'Roboto Condensed', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh'},
          { text: '', cols: 1, rows: 3, color: '', fontSize: '1',fontFamily: 'Rubik', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh' },
          { text: 'want image', imageUrl: "../../assets/img/bluemoon.PNG" ,hasImage: true, cols: 2, rows: 3, color: '', fontSize: '.5', fontFamily:  'Rubik' , paddingTop: '0vh' , marginLeft: '0vh', marginRight: '0vh'},
          { text: 'You do not have to be a technical entrepreneur to make money. Buying and selling good stocks are money makers.  Buy Sell shows the buy sell dates of the last five years to show what your return on using this tool. We calculate the closing indicators of MACD, 10 day moving average, and slow stochiastic of your stock.', cols: 2, rows: 2, color: '', fontSize: '.6' , fontFamily: 'Roboto Condensed', paddingTop: '5vh', marginLeft: '0vh',marginRight: '10vh'  },
          //{ text: 'Try BuySell For Free', cols: 2, rows: 1, color: '', fontSize: '1', fontFamily:  'Roboto Condensed', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh'},
          { text: 'Six', hasButton: true, cols:2, rows: 1, color: '', fontSize: '2',fontFamily: 'Rubik', paddingTop: '0vh', marginLeft: '0vh', marginRight: '0vh' },
        ];

这是component.html代码：

<mat-grid-list cols="{{desired_columns}}" rowHeight="{{desired_rowHeight}}" [gutterSize]="'0px'" *ngIf="mediaObserver.isActive('lg') || mediaObserver.isActive('xl')">
    <mat-grid-tile
        *ngFor="let tile of tiles; let i = index"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background-image]="tile.color"

我尝试了“ this.desired_rowHeight ='.33rem';”我收到此错误。

“错误：无效的值“ .33rem”设置为rowHeight。“

Answer 1

要重现错误，我使用了official documentation中的mat-layout-list的示例，您可以在stackblitz上对其进行检查

这里的问题是'.33rem'不能转换为'0.33rem'，因为它是一个字符串值。

有几种方法可以解决此问题

只需将.33rem更改为0.33rem

this.desired_rowHeight = '0.33rem';

或者您可以这样做

this.desired_rowHeight = .33 + 'rem';

如何在mat-grid-list中动态更改Col和RowHeight

1 个答案: