我尝试在mat-autocomplete中使用cdk-virtual-scroll:

<mat-form-field>
  <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl2"
     [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <cdk-virtual-scroll-viewport class="autocomplete-test-viewport" itemSize="50" minBufferPx="500" maxBufferPx="750">
      <mat-option *cdkVirtualFor="let option of options" [value]="option" class="autocomplete-item">
      {{option}}
      </mat-option>
    </cdk-virtual-scroll-viewport>
  </mat-autocomplete>

但是,虚拟滚动在此设置中不规则地工作.我生成了200个选项,但是如果我使用滚动条向下箭头(chrome)慢慢滚动它会停止在14左右.使用mat-select的类似设置没有这个问题.

有关整个示例设置,请参阅https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html(使用cdk-virtual-scroll进行mat-autocomplete和mat-select).

有没有人使用cdk-virtual-scroll进行mat-autocomplete工作？

我有一个包含很多项目的列表，可以选择每个项目。为此，我使用了Angular Material Virtual Scroll。选择一个项目后，选中的项目将突出显示，然后保存在服务器上。当我刷新页面时，所选项目来自服务器，并再次突出显示。

我的代码看起来像

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

问题是，如果选择列表中下方的项目，则该项目将突出显示，但是我必须向下滚动至列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动至该项目。

我的文档中有一种scrollToIndex方法。在哪里可以找到的实例FixedSizeVirtualScrollStrategy，因此可以调用此方法？

我们的应用程序有一个“表单生成器”，用户可以通过将表单字段拖到表单上来构建表单。我正在研究如何使这个键盘易于访问 - 这样用户就可以......

• 通过按 Tab 键并按 Enter 键来抓取字段
• 使用箭头键移动它
• 再次按 Enter 键将其删除

我没有找到有关使用键盘访问 CDK 拖放操作的信息...

有人成功做到这一点吗？任何人都可以提供一些关于开始以这种方式访问​​它的好地方的指示吗？

有人可以在mat-select内部使用虚拟滚动，如下所示吗？

<mat-form-field>
    <mat-select placeholder="State">
        <cdk-virtual-scroll-viewport autosize>
            <mat-option *cdkVirtualFor="let state of states" [value]="state">{{state}}</mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>

如您所见，https：//stackblitz.com/edit/angular-h4xptu？file = app％2Fselect-reset-example.html不起作用-滚动时会产生奇怪的空格。

我有一个主题列表，每个主题都有一个颜色列表。我用一个按钮打开一个Angular对话框显示所有主题，在对话框中列出该主题的所有颜色，并且可以将这些颜色重新排序@ angular / cdk / drag-drop。

如果我只列出了2-4个主题。我能够毫无问题地重新排列每个主题的所有颜色。但是，如果我有20-30个主题的列表。只有第一个主题可以正常工作，我可以打开对话框并重新排列项目，但是，如果我选择了最后一个项目，则拖放无效。

我尝试调试错误，发现重新排序不起作用时，先前的索引和当前的索引具有相同的值。对于正确的索引，正确的索引是正确的。

我在StackBlitz上构建了一个简单的应用程序，可以在其中重现我遇到的问题。您可以尝试单击列表的第一项的“编辑”按钮，然后看到它可以正常工作，并且可以重新排列颜色，但是尝试重新排列列表中的最后一个主题，您将发现它不起作用。我在控制台中看不到任何错误。我在Chrome和Firefox上都尝试过，但都遇到了相同的问题。

每次拖放颜色时，您还可以在控制台中看到当前索引和上一个索引。

这是该应用程序的链接。

在 angular 拖放模块中，他们提供了 moveItemInArray() 函数的文档，通过使用它我们只能拖动数组中的内容。但是，我们如何在 formArray 中混洗 (formGroups/formControls) 呢？

甚至我也尝试过这个 moveItemInFormArray() 函数，正如这里提到的https://github.com/angular/angular/issues/27171。但我不能让它工作。

groupDrag.component.html

    <form [formGroup]="exampleForm">
      <div formArrayName="formUnits" cdkDropList (cdkDropListDropped)="drop($event)" *ngFor="let unit of exampleForm.controls.formUnits.controls; let i=index" class="rowGroup">
        <div [formGroupName]="i" class="basic-container" cdkDrag>
          <div class="row row-container" >
            <button type="button" class="drag-handle" mat-icon-button cdkDragHandle>
              <mat-icon>unfold_more</mat-icon>
            </button>

            <!-- label input field -->
            <mat-form-field  class="col-lg-4"> 
              <input matInput placeholder="Please enter label without spaces" formControlName="label" required>  
            </mat-form-field>

            <!-- options input field -->
              <mat-form-field  class="col-lg-3"> 
                <input matInput placeholder="Enter Placeholdertext" formControlName="placeholder">
             </mat-form-field>

          </div>
        </div>
      </div>
    </form>

groupDrag.component.ts

drop(event: CdkDragDrop<FormGroup[]>) …

我有一个在垂直方向呈现的卡片列表。我想在列表之间移动。所以，我正在使用Angular CDK拖放功能。

卡片有一些 CSS 规则，但是在移动卡片时它只显示文本数据作为预览移动，但我想在整个卡片移动时显示它。

这是它的移动方式

这是 HTML 代码

<div class="workstep-list" cdkDropList [cdkDropListDisabled]="!isEditWorkflow"
    (cdkDropListDropped)="workstepMoved($event)">
    <div class="list-item" *ngFor="let workstep of worksteps" cdkDrag cdkDragLockAxis="y">
        <div class="workstep-info" (click)="workstepDetail(workstep)">
            <i class="workstep-color"></i>
            <span class="workstep-name">{{workstep.name}}</span>
        </div>
        <!-- Transition list -->
        <div class="workstep-transition" *ngFor="let transition of workstep.transitions">
            <i class="fa fa-arrow-right"></i>
            <i class="transition-color"></i>
            <span class="transition-name">{{transition.name}}</span>
        </div>

        <!-- Add new Transition -->
        <div class="transition-add" *ngIf="isEditWorkflow">
            <i class="material-icons">add</i>
            <span>Add Transition</span>
        </div>
    </div>
</div>

这是CSS

.workstep-list {
    background-image: radial-gradient(#e1e1e1 1px, #fff 1px);
    background-position: 0 0;
    background-size: 9px 9px;
    padding: …

仅供参考，只是想让你们知道我正在编写这个 AWS CDK 应用程序：

• 打字稿
• 我正在使用 Macbook 编写应用程序，运行 macOS Mojave 10.14.6。
• 我的节点版本是 10.16.3
• NPM 版本是 6.9.0
• 我的 AWS CDK 版本是 1.10.0（内部版本 19ae072）。我通过cdk --version在我的 bash 终端上运行获得了这个细节

问题定义

大家好，我对 AWS CDK 非常陌生，目前我仍在使用它。到目前为止，我觉得与键入 cloudformation 模板相比，它确实提供了更多的灵活性。

但是，我无法弄清楚的一件事是如何像System.println() 在 Java或JavaScript 中一样输出变量的值 console.log