标签: angular5

我是 Angular 5 的新手。我的app.component.ts. 我想同时使用*ngFor和*ngIf来创建表行并应用条件。基本上是这样的

<tr *ngFor="let row of rows" *ngIf="row['category']==='M'"><td>...</td><td>...</td></tr>

然而这是不允许的并且会显示错误：

一个元素上不能有多个模板绑定。

如何实现这一目标？

在 *ngFor 循环中，我正在构建带有示例阅读文本的搜索结果（垫卡）列表，我希望允许用户单击其中一个来阅读更多内容，并打开一条通往填充的文档模板的路径与正确的医生。

这个静态 HTML 与 routerlinkactive 一起使用，捕获文档视图页面中的参数...

<button mat-button [routerLink]="['/docview', {sDocName: 'AW010001'}]">READ MORE...</button>

我想将硬编码的文档 ID 'AW010001' 替换为通过 *ngFor 的每次迭代的适当 ID。但是这段代码失败了...

<button mat-button [routerLink]="['/docview', {sDocName: '{{sDocIDs[i]}}'}]">READ MORE...</button>

我得到的错误是典型的......

解析器错误：获得插值 ({{}})，其中表达式应位于 [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]] 中的第 25 列

我已经在 Angular 5 项目上安装了 primeng。我正在使用 p-autoComplete 组件，但现在出现此错误。我应该如何修复这个错误？

这是我的源代码。

<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle"  (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
placeholder="Countries" [minLength]="1"></p-autoComplete>

如何在删除请求中通过httpClient传递body？

请检查我的代码。有什么想法可以在删除请求中通过正文传递数据吗？没有正确的来源如何在 Angular 5 中调用此请求。

let body = removeFile;
    return this.httpClient.delete(`${apiRoot}RemoveQueryData`, {
      headers: new HttpHeaders().set('Content-Type', 'application/json').set('Authorization', `Bearer ${accessToken}`),
      observe: removeFile
    })

我正在观察那个身体。它抛出以下错误。

错误：

Error: Unreachable: unhandled observe type [object Object]}
    at HttpClient.request (http.js:1520)
    at HttpClient.delete (http.js:1546)

我想在npm中使用@organization-scope/package/sub-package。

我的 package.json 如下：-

{
  "name": "@once/ui",
  ...
  ...
}

如果我这样做：-

{
  "name": "@once/ui/select-box",
  ...
  ...
}

它给我一个错误，说invalid name。

我正在使用 Angular 5。有人可以帮助我实现同样的目标吗？

我想使用材料 Angular 2中的 mat-table 制作一个可扩展的数据表。行可以包含子行。

我的行数据是一个可以包含其他子对象的对象。

使用材料角度表组件或垫表，可以定义多个行类型并选择应用于当前迭代的一种。

但是有没有办法在同一次迭代期间生成多种类型的行？

我是否被迫将子项目添加到为 mat-tabke 提供数据的数据源中，或者可以为其提供包含子项目的项目并生成 1 行包含项目数据的行，并为每个子项目生成 1 行？

我尝试遵循此答案中的模型。

所以我在我的 component.ts 中定义了这些行

<mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>
        <mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>

但似乎当 isExpansionDetail 为 true 并且选择第二行类型时，它会“覆盖”第一个行类型，而不会生成第一个行类型。

我正在使用 Angular-Tree-Component 生成带有复选框选项的树。超文本标记语言

<tree-root [nodes]="nodes" [options]="options">
      </tree-root>

打字稿：

import { ITreeOptions } from 'angular-tree-component';
import { Component } from '@angular/core';

export class myComponent {
nodes = [
    {
      name: 'root1',
      children: [
        { name: 'root1_child1' },
        {
          name: 'root1_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    },
    {
      name: 'root2',
      children: [
        { name: 'root2_child1' },
        {
          name: 'root2_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    }
  ]; …

我有一个 angular5 组件，应该触发引导模型打开。它使用按钮运行良好，但没有关于如何在组件内以编程方式打开 ng-bootstrap modal (bootstrap 4) 的明确 api 文档。

样本模态.ts

constructor(private modalService: NgbModal) {}

open(content){
 this.modalService.open(content);
}

样本模态.html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

我使用它是MatDialogRef为了从组件调用模态。关闭时ModalComponent，我尝试取回数据，但 似乎没有任何信息传回。

dialogRef = dialog.open(ModalComponent,ConfigObj).afterClosed
  .subscribe(data => console.log(data));

Modal 的所有其他功能（包括从baseComponent到传递数据）ModalComponent似乎都工作正常。

我在父 component.ts 文件中有一个如下所示的 items 数组

items = [
    {text: 'Length' , value: 10 },
    {text : 'Degree' , value : "108"},
    {text : 'Edges' , value : [10,20,30]}
]

然后我将一个名为app-label-values 的组件放置在父组件的 *ngFor 循环内，如下所示

<div *ngFor ="let item of items">
  <app-label-values
   label="item.text"
   value = "item.value">
  </app-label-values>
</div>

app-label-values组件的目的是显示标签以及该标签对应的值。

例如。年龄：10

这里的标签始终是文本，而值的类型可以是动态的（数字、字符串、数组）

因此，当值是数组类型时，我只需要显示数组的长度，就像在我们的例子中一样，组件应该显示“Edges：3”，因为 [10,20,30].length 是 3。

我的目标不是在 app-label-values 组件中使用这种类型检查逻辑，因为我需要它是愚蠢的并且仅显示传递给它的内容。

如何在渲染时从父组件本身解决这个问题。

请帮忙。提前致谢。