Angular *ngIf不'；当使用可观察的工具时，不要在有角度的材料台上工作

我试图使用一个具有可展开行的角度材质表，仅当屏幕宽度低于特定断点时才显示信息。我正在使用我在HTML中订阅的可观察的

ishandsetrapital$

，来确定是否已到达断点

该表有两列（名称和信息）。无论

ishandsetrapital

为真还是假，都会显示名称，只有当

ishandsetrapital$

为

false

时，才会显示信息。这正如预期的那样有效

在可展开行中，我有一个

*ngIf

，它使用相同的可观察

ishandsetrait$

，在

ishandsetrait$

的输出为

true

时显示文本。然而，这似乎不起作用

表-expandable-rows-example.html

ngIf在这里工作
名称
{{row.name}
信息
附加文本。。。。
ngIf在这里不起作用

表-expandable-rows-example.ts

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“@angular/material”导入{MatPaginator、MatSort、MatTableDataSource}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
从“rxjs”导入{from，Observable，of，pipe}；
从'rxjs/operators'导入{concatMap，delay，map，share}；
从'@angular/cdk/layout'导入{BreakpointObserver，Breakpoints}；
/**
*@具有可扩展行的标题表
*/
@组成部分({
选择器：“表可扩展行示例”，
样式URL:['table-expandable-rows-example.css']，
templateUrl:“表可扩展行示例.html”，
动画：[
触发器（'detailExpand'[
状态（'collapped'，样式（{height:'0px'，minHeight:'0'}）），
状态（'expanded'，样式（{height:'*'}）），
过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1））
]),
]
})
导出类TableExpandableRowsExample{
public ishandsetgrative$：Observable=this.breakpointObserver.Observable（Breakpoints.handsetgrative）
.烟斗(
映射（orientationState=>orientationState.matches），
股份（）
);
私人聊天请求=[
{
姓名：“约翰·韦恩”
},
{
名字：“奥斯卡王尔德”
},
{
姓名：“埃里克·坎通纳”
}
];
dataSource=新MatTableDataSource（this.chatRequests）；
displayedColumns:{def:string，isMobile:boolean}[]=[
{
def:'名称'，
伊斯莫比尔：是的
},
{
定义：“信息”，
伊斯莫比尔：错
}
];
构造函数（私有断点观察者：断点观察者）{}
公共getDisplayedColumns（IShandSetGrative:boolean）{
返回此.displayedColumns
.filter（cd=>！isHandsetPortrait | | cd.isMobile）
.map（cd=>cd.def）；
}
}

我已经整理了一份报告，它应该突出我所面临的问题

---

*ngIf

在表外工作（html模板的第2行），但在表内不工作（html模板的第28行）。如何使第二个

*ngIf

工作？

您必须使用shareReplay使其工作，使用share第二个订户不会发生任何事情

public isHandsetPortrait$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.HandsetPortrait)
.pipe(
  map(orientationState => orientationState.matches),
  shareReplay(1) // here
);

public ishandsetgrative$：Observable=this.breakpointObserver.Observable（Breakpoints.handsetgrative）
.烟斗(
映射（orientationState=>orientationState.matches），
shareReplay（1）//这里
);

---

太好了，非常感谢您！我从根本上误解了

share（）

的工作原理；将我的代码更改为您的解决方案为我修复了它。再次感谢！

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { from, Observable, of, pipe } from 'rxjs';
import { concatMap, delay, map, share } from 'rxjs/operators';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

/**
 * @title Table with expandable rows
 */
@Component({
  selector: 'table-expandable-rows-example',
  styleUrls: ['table-expandable-rows-example.css'],
  templateUrl: 'table-expandable-rows-example.html',
animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ]),
  ]
})
export class TableExpandableRowsExample {

    public isHandsetPortrait$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.HandsetPortrait)
    .pipe(
      map(orientationState => orientationState.matches),
      share()
    );

  private chatRequests = [
    {
      name: 'John Wayne'
    },
    {
      name: 'Oscar Wilde'
    },
    {
      name: 'Eric Cantona'
    }
  ];

  dataSource = new MatTableDataSource(this.chatRequests);

  displayedColumns: { def: string, isMobile: boolean }[] = [
    {
      def: 'name',
      isMobile: true
    },
    {
      def: 'info',
      isMobile: false
    }
  ];

  constructor(private breakpointObserver: BreakpointObserver) { }


  public getDisplayedColumns(isHandsetPortrait: boolean) {
    return this.displayedColumns
      .filter(cd => !isHandsetPortrait || cd.isMobile)
      .map(cd => cd.def);
  }

}

public isHandsetPortrait$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.HandsetPortrait)
.pipe(
  map(orientationState => orientationState.matches),
  shareReplay(1) // here
);