如何动态更改 mat-grid-list 中的 Col 和 RowHeight答案

【问题标题】：How To Dynamically Change Col and RowHeight in mat-grid-list如何动态更改 mat-grid-list 中的 Col 和 RowHeight
【发布时间】：2019-09-04 07:01:09
【问题描述】：

我从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。”

【问题讨论】：

你得到什么错误？
我将错误添加到问题中。这是错误“错误：无效值“.33rem”设置为rowHeight。'
就这样使用this.desired_rowHeight = '0.33rem';
我尝试了 100px 而不是 .33 rem 并且它有效。也许 rem 太小了。就是这样，我把它改成 33 rem 就可以了。
我已经发布了一个可能的解决方案的答案。

标签： angular

【解决方案1】：

为了重现错误，我使用了来自official documentation 的mat-layout-list 示例，您可以在stackblitz 上查看它

这里的问题是'.33rem' 没有被翻译成'0.33rem'，因为它是一个字符串值。

有几种方法可以解决这个问题

只需将.33rem 更改为0.33rem

this.desired_rowHeight = '0.33rem';

或者你可以这样做

this.desired_rowHeight = .33 + 'rem';

【讨论】：