标签: angular-material

所以我想用 Angular 制作我的战舰游戏版本，为此我需要一个 10x10 矩阵，我可以在其中拖放船只（如果你玩过游戏，你知道我在说什么）并且我正在使用Angular Cdk，但我根本无法让它工作。

到目前为止我所尝试的是用 div 制作一个表格，将元素放在一边并将它们拖放到板上，但我无法连接两个数组，因为船只数组不是嵌套的，而板是嵌套的。

编辑：这是 stackblitz 示例的链接：https ://stackblitz.com/edit/angular-pp24ad

值得注意的是，矩阵中充满了 IBox，这将有助于稍后的游戏实现。我不确定是否必须更改船舶的数据结构。例如，作为另一个矩阵，我从中获取船只并转移到棋盘上，但我仍然无法弄清楚拖动。我仍然不确定这是解决这个问题的最好方法，所以我愿意改变解决问题的方法。

我的角度版本是 7。我正在创建一个表单，其中有一个下拉选择来选择一个选项。我的列表适用于选择，但是当我加载页面时，它没有显示预定义的值。该页面处于编辑用户数据的形式。下面是我的html代码，

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Server Name</mat-header-cell>
    <mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
        <mat-form-field>
            <!-- <input class="jminput" matInput formControlName="name" autocomplete="off"> -->
            <mat-select matSelect [formControl]="name">
                <mat-option *ngFor="let item of arr" value="item">{{item}}</mat-option>
            </mat-select>
            <mat-error *ngIf="name.touched && !name.required">
                Server Name is required
            </mat-error>
        </mat-form-field>
    </mat-cell>
</ng-container>

当我代替<input>时<mat-select>，它会工作并显示作为初始值的值。所以我认为formControlName="name"工作正常。但它不适用于<mat-select>.

请建议。

我想以 json 格式在工具提示中显示数据，如图所示。

我可以在工具提示中加载数据（但不能按照所附图片中的格式）。

<ng-container matColumnDef="Alert">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Alert </th>
                <td mat-cell *matCellDef="let row">
                        <span matTooltip="{{(row?.conditionals)?(row.conditionals | json):''}}">{{row.Alert}}</span> 
                </td>
 </ng-container>

堆栈闪电战链接。html 和 ts 代码位于 stackblitz 链接中。

https://stackblitz.com/edit/angular-mat-tooltip-xngsaq?file=app%2Ftooltip-overview-example.ts

当我们将鼠标悬停在第一列时，在工具提示条件、偏移、警报中需要显示如附图所示。

#EDIT1 我还尝试过基本的 html 工具提示，如果有人可以建议格式化数据，这也对我有用

https://stackblitz.com/edit/angular-mat-tooltip-ik3f8e?file=app%2Ftooltip-overview-example.css

作为参考，so 链接之一 使用 JavaScript 进行漂亮打印 JSON

我正在从rest api 在mat 表上显示数据，其中有一列“changeType”，以数字形式显示数据。此处显示“4”表示“添加”，“1”表示“更新”。我想显示正确的单词而不是数字以使用户更容易理解。我怎样才能实现它？

<ng-container matColumnDef="changeType">
       <th mat-header-cell *matHeaderCellDef> Change Type </th>
       <td mat-cell *matCellDef="let element"> {{element.changeType}} </td>
</ng-container>

我在页面中使用材质表，并且希望表数据源每 5 秒刷新一次，以便值的任何更改都将反映在表中。这就是我现在所做的：

everyFiveSeconds: Observable<number> = timer(0, 5000);

ngOnInit() {
this.everyFiveSeconds.subscribe(() => {
  this.getComponents();
});

getComponents()发送获取请求并将输出分页到材料表。然而问题是，一旦我最初加载此页面，每 5 秒就会发出一次 get 请求。但即使我导航到另一个页面，应用程序也会继续发送请求。如果我重新访问该页面，请求每 2.5 秒发送一次，并且如果我重复，请求的频率会不断增加。

如何修改我的代码，以便仅当我位于此组件页面时才发送此 get 请求，并确保如果我重新访问此页面，不会创建多个计时器？

我试图从侧面隐藏滚动条，同时保持滚动能力

StackBlitz 演示：https://stackblitz.com/edit/github-443roq

将 Angular 库从 Angular 9 更新到 Angular 10 后，我在构建库时收到以下错误。

ERROR: Symbol MatButton declared in ...........................  is not exported from @angular/material/button. 

我无法理解原因，有人可以建议需要做什么吗？

谢谢，米纳克什

在这两种情况下，使用 '!important' 都不会按预期工作。如果我删除“！重要”，背景颜色会收到更改，但不会更改继承原因。但我希望它是“！重要！”。

没有“！重要”：

element.style {
    margin-right: 5px;
    *background-color: 'green';* (line-through)
}

与“！重要”：

element.style {
    margin-right: 5px;
}

我已经尝试过：

[ngStyle]="{'background-color': myColor + ' !important'}"

和

[attr.style]="'background-color: ' + myColor  + ' !important'"

和

[style.background-color]="myColor  + '!important'"

问题是我正在动态生成按钮，并且在生成过程中我想应用背景颜色。那我不能用@ViewChild

我的项目中有几个垫子扩展面板。正如预期的那样，当我单击它们时，它们会打开并保持打开状态，直到单击关闭为止。我希望一次只能打开一个面板。也就是说，如果单击另一个面板时已经打开一个面板，则应关闭打开的面板并打开新面板。这可以在 Angular 中做到吗？我该如何进行此修改？

我已将 Angular Material 安装到我的一个 Angular 应用程序中，尽管我已在 angular.json 文件中添加了样式链接，但组件的样式不起作用。这是 angular.json 文件的 styles 数组的样子：

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
    ],

我尝试上下切换样式文件路径，如下所示。

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],

当我将 Bootstrap 路径移动到数组末尾时，Material 样式可以工作，但 Bootstrap 停止工作。

我的 CLI 和应用程序信息如下：

Angular CLI: 11.0.0-rc.0
Node: 12.16.3
OS: darwin x64

Angular: 11.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0-rc.0
@angular-devkit/build-angular   0.1100.0-rc.0
@angular-devkit/core            11.0.0-rc.0
@angular-devkit/schematics      11.0.0-rc.0
@angular/cdk                    10.2.5
@angular/material               10.2.5
@schematics/angular             11.0.0-rc.0
@schematics/update              0.1100.0-rc.0 …