Question

我在项目中使用<mat-grid-list>，如下面的代码所示

HTML

<mat-grid-list cols="2" [cols]="breakpoint" rowHeight="240px"  (window:resize)="onResize($event)">
     <mat-grid-tile>
           1
     </mat-grid-tile>
     <mat-grid-tile>
           2
     </mat-grid-tile>
<mat-grid-list>

TS

 import {Component, OnInit, VERSION, ViewChild } from '@angular/core';

 export class CustomersComponent implements OnInit {
     public ngVersion: string = VERSION.full;
     public matVersion: string = '5.1.0'; 
     public breakpoint: number; 

     ngOnInit() {
       this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
     }

     onResize(event) {
       this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
    }

  }

如何将第一个<mat-grid-tile>宽度设置为 40％，然后将第二个<mat-grid-tile>宽度设置为 60％。请尝试此answer同样，仍然没有结果。这是stackblitz链接

Answer 1

尝试这样：

DEMO

n=len(l)
c=0
for i in range(n - 1):
    if l[i]<l[i+1]:
        c+=1
    if c==1:
        break
if(c==1):
    return False
return True

css：

<mat-grid-list [cols]="breakpoint" (window:resize)="onResize($event)">


<mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g1">
    Grid 1
</mat-grid-tile>

<mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g2">
    Grid 2
</mat-grid-tile>

TS：

.g1{
  width: 40% !important ;
  background-color: red;
}
.g2{
  width:60% !important;
  background-color: blue;

}

.fullWidth{
  width: 50% !important ;
}

在mat-grid-list组件中为mat-grid-tile设置不同的宽度

1 个答案: