Angular 如何动态更改网格列表中的列和行高

我找到了关于如何在mat grid列表中动态更改列数和高度的大部分答案

如何添加'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"

我试过这个。期望的高度='0.33rem'；我得到这个错误

---

错误：无效值。33rem设置为行高。

为了重现错误，我使用了来自的mat布局列表示例，您可以在

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

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

只需将.33雷姆改为0.33雷姆

或者你可以这样做

this.desired_rowHeight = .33 + 'rem';

---

你犯了什么错误？我把错误加在问题上了。这是错误：无效值。33rem设置为rowHeight。'只需像这样使用即可。desired_rowHeight='0.33rem'；我试着用100px而不是.33 rem，效果很好。也许rem太小了。就是这样，我把它改成了33雷姆，它可以工作了。我已经发布了一个答案和一个可能的解决方案。

this.desired_rowHeight = .33 + 'rem';