小编Edr*_*ric的帖子

Angular 6 使用 Angular Material，显示列表，使用选项卡进入项目详细信息“页面”。

我的路线很简单：

{
    path: '', component: CurrenciesComponent
}

我尝试了这样的事情：

{
    path: 'currencies',
    canActivate: [AuthGuard],
    component: CurrenciesComponent,
    children: [
        { path: 'currencies/:id', component: CurrenciesDetailComponent }
    ]
}

我寻找解决方案，但没有解决它。也许使用材质选项卡无法实现这一点？

我刚刚学习了 Udemy - 完整的 Angular 课程 - 从初学者到高级在将产品保存在 Firebase“类别”：“未定义”中有一个小问题

我使用角版本

角 CLI：6.0.8

"products" : {
        "-LGoVcK9sUP-lzEqXy-1" : {
          "category" : "undefined",
          "imageUrl" : "imageUrl",
          "price" : 12,
          "title" : "title"
        }

<form #f="ngForm" (ngSubmit)="save(f.value)">
      <div class="form-group">
        <label for="title">Title</label>
        <input ngModel name="title" type="text" id="title" class="form-control">
      </div>
      <label for="price">Price</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">$</span>
        </div>
        <input ngModel name="price" type="number" class="form-control" id="price">
      </div>
      <div class="form-group">
        <label for="category">Category</label>
        <select [ngModel] name="category" id="category" class="form-control">
          <option value=""></option>
          <option *ngFor="let c of categories$ | async" …

我有一个数据表，我正在尝试分配<a>一个参与者名称<td>，该名称将在单击新组件时将用户带入。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let Participant"> <a routerlink="/participants/userId">{{Participant.name}}</a> </td>
</ng-container>

它没有显示错误或其他任何内容，但是，它没有使<td>clickable可用，它完全忽略了routerLink，如果我将分配href给<a>它的话。

我正在尝试在 Angular 中创建一个联系表单，并且我希望在用户单击提交时使用 Angular Material 显示一个不确定的进度条。

我按照官方 Angular Material 网站 ( https://material.angular.io/components/progress-bar/overview )上提到的步骤进行操作。但是，当我将它包含在我的 Web 应用程序中时，进度条只会显示为虚线。

显示问题的 PFB 屏幕截图：

[1

代码片段：

任何人都可以请教为什么 Angular-Material 进度条会这样，以及可能的解决方案吗？

有什么方法可以设置一个可扩展的角垫面板始终扩展？。当用户点击面板标题时，我不想关闭它

谢谢...

我试图使用mat-menu和matMenuTriggerFor在页面顶部创建菜单，我在材料网站（https://material.angular.io/components/menu/examples）中找到了一个示例，并尝试实现它，一切正常好的buut我得到以下错误。

ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.
Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>"

在控制台中。我不知道原因 有人知道解决方案吗？

我正在开发一个简单的基于 Angular6 的表单，并希望创建一个类似于我在 AWS 使用的输入字段。

这是我拥有的代码的狙击手：

 <mat-form-field class="full-width">
     <input matInput [(ngModel)]="enteredText" type="text" (keyup.enter)="addToArray()" name="text">
 </mat-form-field>

之后是我已经添加的文本数组：

<ul>
    <li *ngFor="let text of textArray; let i = index">
        <span> {{ text }} </span>
        <button mat-icon-button (click)="deleteTextFromArray(i)"><mat-icon>clear</mat-icon></button>
    </li>
</ul>

我也有一个enteredText模型textArray。

这是addToArray()功能：

addToArray() {
    this.textArray.push(this.enteredText);
    this.enteredText= '';
}

这是deleteTextFromArray函数：

deleteTextFromArray(index) {
  this.textArray.splice(index, 1);
}

我遇到的问题是我无法在数组中插入 1 个以上的元素。出于某种原因，在第一个元素之后，每次插入都会触发我的删除功能。谢谢你的帮助。

在我的 Angular v6 应用程序中，我尝试显示一个下拉列表并将其设置为required基于布尔值，它设置在复选框的值上。这是我的模板中的代码片段（includeModelVersion最初设置为false）：

<mat-checkbox class='matCheckbox' (change)="includeModelVersion = !includeModelVersion">Run Model</mat-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
<mat-form-field *ngIf="includeModelVersion">
  <mat-select placeholder="Select Model Version" formControlName="modelVersionCtrl" [required]="includeModelVersion">
    <mat-option *ngFor="let model of modelData" [value]="model?.MODEL_VERSION">{{model.MODEL_VERSION}}</mat-option>
  </mat-select>
</mat-form-field>

在我的 .ts 构造函数中，我定义了布尔值：

includeModelVersion: boolean = false;

使用 *ngIf 可以正确显示下拉列表，但问题与[required]="includeModelVersion"内有关mat-select。

如果我不选中该复选框，则表单可以正常提交，但如果我选中该复选框然后取消选中它，则下拉列表仍然是必需的，即使includeModelVersion=false.

我在这里遗漏了一些东西，还是我错误地定义了一些东西？

我有一个带复选框行的角材料表。 基于选中和未选中的材料表，我想从选定的复选框行值中操作其他字段。

这里我有folderObjs数组，这个数组的控制台在下面的代码中，我放置了搜索输入字段，我想通过文件夹名称和文件夹大小以角度搜索这个数组，这怎么可能？

HTML

<mat-form-field>
 <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>

<div *ngFor="let folder of folderObjs">
  <span>{{folder.folderName}}</span>
  <span>{{folder.folderSize}}</span>
</div>

TS

folderObjs : Folder[] = [];

applyFilter(filterValue) {
  console.log(this.folderObjs);
// 0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", …}
   1: {folderid: 782, folderName: "biju folder", folderActivity: "true", …}
   filter: "d"
   length: 2

  this.folderObjs.filter = filterValue.trim().toLowerCase();
}