Question

我正在使用此document创建响应式网页。当我在HTML文件中添加“ * ngIf =“ mediaObserver.isActive（'lg'）”时，出现错误。这是HTML文件。

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

        [ngClass]="'tile' + i"
        [ngStyle]="{'font-size': 'calc(' + tile.fontSize + 'rem + 0.5vw)', 'font-family': tile.fontFamily +', sans-serif;',
        'padding-top':tile.paddingTop, 'margin-left':tile.marginLeft, 'margin-right':tile.marginRight, 'line-height': 1.2}"
     >

       <ng-container *ngIf="tile.hasImage; else second" >
         <img [src]="tile.imageUrl"/>
       </ng-container>

       <ng-template #second>
          <ng-container *ngIf="tile.hasButton ; else textContainer">
             <a mat-button  routerLink="/auth">Try BuySell For Free</a>
          </ng-container>
       </ng-template>
       <ng-template #textContainer>
          {{tile.text}}
       </ng-template>
     </mat-grid-tile>
</mat-grid-list>

我还尝试了media.isActive，但没有成功。

这是component.ts代码：

import { Component, OnDestroy } from '@angular/core'
import {MediaChange, MediaObserver} from '@angular/flex-layout';
import {Subscription} from 'rxjs';

export interface Tile {
 color: string;
  cols: number;
}
@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})
export class HomeComponent implements OnDestroy{
  tiles: Tile[] ;

  watcher: Subscription;
  activeMediaQuery = '';

  constructor(mediaObserver: MediaObserver){
  this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
    this.activeMediaQuery = change ? `'${change.mqAlias}' = 
       (${change.mediaQuery})` : '';
    if ( change.mqAlias == 'xs') {
       this.loadMobileContent();
    }
    switch(change.mqAlias) { 
      case 'xs': { 
         //statements; 

         break;

Answer 1

我将origin2/develop更改为constructor(mediaObserver: MediaObserver)，并且代码运行正常。

无法读取mediaObserver Flex布局的undefined属性'isActive'

1 个答案: