标签: angular-cdk

我正在使用Angular Material Table.在Html代码中,有

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

我发现cdkHeaderCellDef和cdkCellDef来自CDK Table

我收到错误说" 无法绑定到'cdkHeaderRowDef',因为它不是'md-header-row'的已知属性. "

我怎么解决这个问题？

有没有办法动态创建拖放区？我在使用ngFor和cdkDropList时遇到了一些麻烦.

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个清单:

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在,带有'conta'类的div在*ngFor中.

我想,我的问题是我的第二个清单.如果我将一个元素从第二个列表拖到列表一,它可以正常工作,但如果我尝试将元素从列表一拖到第二个列表中的任何列表实例,它就无法识别该元素是否被拖动.在这里演示:

我在这里做错了吗？打字稿部分工作正常.

谢谢

这是关于"cdk dnd"和"嵌套"的第三个问题!

我没有得到另一个SO问题的hacky建议.

所以这里有一个非常简单的基础- > STACKBLITZ < -我创造了.一切正常,我与容器内的嵌套元素进行交互.

当我尝试仅对嵌套元素进行排序时,angular会尝试使用容器本身对嵌套元素进行排序...这会产生不需要的行为.

有谁知道如何解决这个问题？明天我会继续这个工作.

我的mat-table工作正常，但是按照官方api文档添加mat-sort时，它在ngAfterViewInit失败，并显示以下消息

无法在ViewFeedbackComponent.ngAfterViewInit上设置未定义的属性“ sort”

关于此问题已经有一个SO帖子（请参阅以下链接）Mat-table Sorting Demo不起作用，但是我仍然无法使它起作用。

有人发现问题了吗？官方示例使用组件本身中定义的“静态” MatTableDataSource，但是我从后端进行查询。

任何帮助是极大的赞赏！

MatSortModule已导入到app.module.ts中，mat-sort-header指令已应用于列，并且ngAfterViewInit已与官方示例中的完全相同...

import {  Component,  OnInit,  ViewEncapsulation,  ViewChild,  AfterViewInit} from '@angular/core';
import {  Feedback} from '../../../../../models/feedback';
import {  FeedbackService} from '../../services/feedback.service';
import {  MatTableDataSource,  MatSort} from '@angular/material';


@Component({
  selector: 'app-view-feedback',
  templateUrl: './view-feedback.component.html',
  styleUrls: ['./view-feedback.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {

  feedbacks: Feedback[] = [];
  showSpinner: boolean = true;
  displayedColumns: String[] = [
    'id',
    'user',
    'timestamp',
    'stars'
  ];
  dataSource: MatTableDataSource < Feedback > ;

  @ViewChild(MatSort) sort: MatSort; …

在做了一些搜索之后，我开始意识到我应该使用Flex-Layout库来使 Material-themed UI 具有响应性（如这里的回答）。根据文档，该库提供了MediaObserver以编程方式检测媒体查询激活的类。

我使用了材料原理图命令 -

ng g @angular/material:navigation shell/layout

添加一个Sidenav组件，并注意到以下生成的代码 -

ng g @angular/material:navigation shell/layout

它使用BreakpointObserver类并Breakpoints从@angular/cdk/layout包中预定义来检测视口更改。和文档说-

布局包提供实用程序来构建响应屏幕尺寸变化的响应式 UI。

因此，显然，有两个不同的库可用于使 Material 主题的 UI 响应，并且它们使用不同的方法。（如果我错了，请纠正我）。

我想知道 -

• 从使用的角度来看，这两个库/包之间有什么区别，即什么时候使用哪个？
• 是否在引擎盖下MediaObserver使用BreakpointObserver？
• 如果我使用 Flex-Layout，我应该@angular/cdk/layout完全避免使用实用程序吗？在这方面是否有一些最佳实践可以遵循？

编辑：2020.05.11
根据 的源代码MediaObserver，它不使用底层BreakpointObserver。它使用本机Window.matchMedia()API。

我正在使用 Angular 的cdk-virtual-scroll-viewport. 除了订阅视图位置之外，该功能不依赖于它的任何特殊功能，以便在用户滚动到底部时加载新元素（在自定义中DataSource<Item>）：

connect(collectionViewer: CollectionViewer): Observable<Item[]> {
  this.viewChanges = collectionViewer.viewChange.subscribe((listRange) => {
    this.loadItemsFor(listRange);
  });
  ..
}

当所有项目都具有相同的高度时（在 css 和 中指定itemSize）<cdk-virtual-scroll-viewport>，效果很好。现在我尝试添加不同类型的项目，其大小不同（可以说100pxvs 50px）。这并不与FixSizeVirtualScrollStrategy配合良好，因此我尝试使用autosize（cdl-experimental使用AutoSizeVirtualScrollStrategy）。但是，使用动态策略，一旦将新元素添加到备份虚拟滚动的数据源，滚动位置就会闪烁（我假设是因为ItemAverager）。

是否有可行的方法来实施这两种策略的混合？我知道列表中每个项目的类型，因此它的高度，所以应该可以准确计算正在显示的内容和要加载的内容？当然，对于大型集合来说，它的性能可能不那么好。

我使用git项目作为虚拟键盘(https://ngx-material-keyboard.github.io/demo/).我有一些问题要让它在450*250像素的小型设备上运行.

最后,如果我使用开发工具直接在Web浏览器上修改它,我会在css中找到必要的更改.

现在我必须找到改变来源的正确位置.

将使用angular2-material的overlay组件来显示键盘.

如果我在cdk-overlay-container中注释掉该位置,它的工作原理如下:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

但我无法从我的角度应用中覆盖这些.有什么建议？

更改截图

Angular Material CDK提供了一个Directive CdkScrollable,它允许您监听ScrollEvent特定容器的s.
我现在想访问CdkScrollable的MatSidenavContent,这是默认添加.
但是我的@ViewChild(CdkScrollable)和@ContentChild(CdkScrollable)总是未定义的.

我Component看起来像这样:

<mat-sidenav-container>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <div>Main content</div>
</mat-sidenav-container>

生成的DOM看起来像这样:

<mat-sidenav-container>
    <div class="mat-drawer-backdrop"></div>
    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
    <mat-sidenav>Sidenav content</mat-sidenav>
    <mat-sidenav-content cdkScrollable>
          <div>Main content</div>
    </mat-sidenav-content>
</mat-sidenav-container>

的mat-sidenav-content Component,这是自动生成的,采用的是CdkScrollable-Directive,我需要访问.
我现在的问题是:
是否有可能访问它Directive,如果可以,如何访问？

我正在研究mat-button-toggle-group,我通过覆盖mat-button-toggle-checked类来修改现有的css,如下所示.现在,当我在按钮之间切换时,css不工作,直到我得到焦点,这是因为当点击的按钮处于焦点时,正在添加2个cdk类'cdk-focused'和'cdk-program-focused'.有没有什么方法可以让这些类禁用或使它们不适用或用相同的mat-button-toggle-checked css覆盖它们？

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

和css

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

Angular Material CDK树组件文档说:

"平面树通常更容易进行样式和检查.它们对滚动变化也更友好,例如无限或虚拟滚动 "

有关如何将虚拟滚动应用于CDK平面树的任何想法？

我有一个巨大的树来渲染,现在它很慢,当我递归打开所有节点时它会崩溃

我试过<cdk-virtual-scroll-viewport> @ angular/cdk-experimental但是没弄清楚如何将它与树组件集成