如何显示元素内的所有对象，直到Angular中的最后一个元素？
如何显示元素内的所有对象，直到Angular中的最后一个元素？
提问于 2019-05-20 00:35:24
现在，我正在尝试解决我在Angular中遇到的一个问题。问题是我有一个大对象，它在一个数组中包含多个相同类型的对象，也可以在它的数组中包含相同的对象。我知道这听起来有点复杂，但我会在后面的文章中更好地解释它。
export class Parameter {
name: number;
subject: string;
type: string;
comparison: string;
colour: string;
givenValue: number;
tree: string;
children: Parameter[];
}我已经尝试了一些单词/句子来寻找有同样问题的人，但是找不到。也许我试图用不同的方式/不正确的方式解释我的问题？我不知道，但是我面对这个问题已经有些日子了，我已经摆脱了它。
下面你可以看到我的HTML代码是用angular编写的，用来查看对象中的每个对象以及对象内部的对象。我面临的问题是，我只能看到第一个对象，以及该对象内部的对象。但是到目前为止，我还不能让它自动显示所有的对象，直到结束。正如你所看到的，我展示了用ngfor硬编码的第二层。
<div class="accordion" *ngFor="let currentParameter of smartContract.parameters">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Parameter {{currentParameter.name}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="parameter">
<div class="inputs">
<div class="input">
<mat-form-field>
<mat-select placeholder="Kies een categorie">
<mat-option *ngFor="let category of categories"
[value]="category.value"
(click)="currentParameter.subject = category.value"
> {{category.viewValue}} </mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<mat-expansion-panel *ngFor="let currentParameterOfChild of currentParameter.children" > <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->
<mat-expansion-panel-header>
<mat-panel-title>
Parameter {{currentParameterOfChild.name}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="parameter">
<div class="inputs">
<div class="input">
<mat-form-field>
<mat-select placeholder="Kies een categorie">
<mat-option *ngFor="let category of categories"
[value]="category.value"
(click)="currentParameterOfChild.subject = category.value"
> {{category.viewValue}} </mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<div class="add-parameter-layer">
<button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
<mat-icon aria-label="Icon-button with plus">add</mat-icon>
</button>
<mat-menu #param1="matMenu">
<button mat-menu-item type="button" >
<span (click)="newParameterNewLayer(currentParameterOfChild.name, currentParameterOfChild.tree)">Nieuwe parameter in nieuwe laag</span>
</button>
<button mat-menu-item type="button">
<span (click)="newParameter()">Nieuwe parameter in deze laag</span>
</button>
</mat-menu>
</div>
</mat-expansion-panel> <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->
<div class="add-parameter-layer">
<button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
<mat-icon aria-label="Icon-button with plus">add</mat-icon>
</button>
<mat-menu #param1="matMenu">
<button mat-menu-item type="button" >
<span (click)="newParameterNewLayer(currentParameter.name, currentParameter.tree)">Nieuwe parameter in nieuwe laag</span>
</button>
<button mat-menu-item type="button">
<span (click)="newParameter()">Nieuwe parameter in deze laag</span>
</button>
</mat-menu>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>我知道，我的英语很差，我想为此道歉。但我现在真的需要帮助。我需要显示div内部的div，直到我在最后一个对象中，如何包含变量。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-20 01:01:20
您可以使用递归组件来实现这一点。它们在here中有详细的解释。
粗略地解释一下，您希望在组件自己的模板中使用它。根据children属性的存在，将需要递归运行的代码移到其自己的组件中，并在其中使用组件本身。
@Component({
selector: 'app-recursive'
template: `
<ng-container*ngFor="let child of entry.children">
<!-- Your content, omitted for readability -->
<app-recursive *ngIf="child.children && child.children.length > 0" [entry]="child"></app-recursive>
</ng-container>
`
})
class AppRecursiveComponent {
@Input() entry:Parameter;
}然后，在您的模板中，只需使用<app-recursive [entry]="parameterRoot"></app-recursive>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56209871
复制相关文章
相似问题