-1

我有一个像下面这样的对象。我需要将所有subcategoryList名称作为单行呈现给 Angular HTML 模板。我在一行中使用这种解决方案打印数组：someObject.languages.join(' , '). 我可以使用什么类型的方法？我不能使用*ngFor，因为它会为每个对象项呈现单独的行。

{
  firstName: " Hello",
  lastName: "World",

  category: [{
    catId: "1",
    catName: "SomeCat"
    subcategoriesList: [{
        subcatId: "5",
        subcatName: "SubSomeCat"
      },
      {
        subcatId: "6",
        subcatName: "SubSomeCat1"
      }
    ]
  }, {
    catId: "2",
    catName: "SomeCat2"
    subcategoriesList: [{
        subcatId: "9",
        subcatName: "SubSomeCat"
      },
      {
        subcatId: "10",
        subcatName: "SubSomeCat1"
      }
    ]
  }]
}
4

3 回答 3

3

您可以将结构更改为更扁平的方式。或者您可以使用跨度或内联 div。

<span *ngFor="let category of data.category">
    <span *ngFor="let subcategory of category.subcategoriesList">
        {{subcategory.subCatName}}
    </span>
</span>
于 2019-11-07T14:06:56.363 回答
1

据我了解，您希望所有子类别名称都作为 HTML 中的单个字符串。您可以使用角度管道在 UI 上显示数据之前对其进行转换。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'categoryNames'
})
export class CategoryNamesPipe implements PipeTransform {
  public transform(obj: unknown): any {
    return category
      .map(list =>
        list.subcategoriesList.map(subCatgeory => subCatgeory.name).join(', ')
      )
      .join(', ');
  }
}

HTML：

<span> {{fullCatgeoryObj | categoryNames}}</span>
于 2019-11-07T14:12:32.963 回答
1

正如 Arcteezy 提到的，它可以通过 hack 来完成，默认情况下 DIV 渲染为display:block和 SPAN 为display:inline.

----------------------------USING SPAN--------------------------
<br>
<span *ngFor="let category of myData.category">
     <span *ngFor="let subcategory of category.subcategoriesList">
        {{subcategory.subcatName}}
    </span>
</span>
<br>
----------------------------USING DIV------------------
<BR>
<div *ngFor="let category of myData.category" style="float:left">
  <div *ngFor="let subcategory of category.subcategoriesList" style="float:left">
        {{subcategory.subcatName}}
    </div>
</div>

堆栈闪电战演示

于 2019-11-07T14:21:59.767 回答