[英]How to create n level nested expand/collapse component dynamically in angular
我正在使用div開發一個n級嵌套表的腳本。
因此,有5到6列有n
行,每個第一列都必須展開/折疊按鈕,點擊后我調用API,它給出了與所選行過濾器相對應的數據。
以前當我使用核心JavaScript和jQuery時,我使用文檔選擇器的find
方法來識別展開/折疊按鈕的父級,並僅使用innerHTML
或jQuery的append
方法在該特定div之后推動動態創建的HTML
我對角度有點新意,並沒有多少工作。 請幫我解決這個問題。
splitOpt
是一個對象數組,我將根據該數組拆分報告數據。
this.splitOpt = [
{
id: "country",
label: "Country"
},
{
id:"os".
label:"Operating System"
},
{
id:"osv".
label:"Operating System Version"
}
]
獲取報告的功能
getReport() {
// apiFilters are array of object having some values to filter report data
var apiFilters: any = [{}];
for (var i = 0; i < this.sFilters.length; i++) {
if (this.sFilters[i][0].values.length > 0) {
var k;
k = this.sFilters[i][0].id
apiFilters[0][k] = this.sFilters[i][0].values;
}
}
var split = this.splitOpt[0].id;
this._apis.getReportData(split, apiFilters[0]).subscribe(response => {
if (response.status == 1200) {
this.reportData = response.data.split_by_data;
}
})
}
檢查是否有更多分裂的功能
checkIfHaveMoreSplits(c){
if(this.splitOpt.length > 0) {
var index = this.splitOpt.findIndex(function(v) {
return v.id == c
})
if (typeof(this.splitOpt[index+1]) != "undefined"){
return this.splitOpt[index+1];
} else {
return 0;
}
}
}
基於拆分和報告數據繪制表的代碼。
讓我們假設splitopt
對象中只有一個對象,而checkIfHaveMoreSplits()
返回0
表示我不必給出展開按鈕,如果它不是0
,那么展開按鈕就會出現在那里。
單擊展開按鈕我將從splitopt
選擇下一個元素並調用API以獲得具有拆分參數作為載體的報告,依此類推。
<div class="table" >
<div class="row" *ngFor="let rData of reportData; let i = index;" >
<div class="col" >
<button
class="btn btn-sm"
*ngIf="checkIfHaveMoreSplits(splitbykey) !== 0"
(click)="splitData(splitbykey)"
>+</button>
{{rData[splitbykey]}}
</div>
<div class="col">{{rData.wins}}</div>
<div class="col">{{rData.conversions}}</div>
<div class="col">{{rData.cost}}</div>
<div class="col">{{rData.bids}}</div>
<div class="col">{{rData.impressions}}</div>
<div class="col">{{rData.rev_payout}}</div>
</div>
我正在管理一個數組,它可以識別我可以擴展崩潰元素的深度
我們假設數組有三個元素,即country,carrier和os
因此,我將繪制的第一個表格中包含表格中所有國家/地區的點擊按鈕,我將發送所選國家/地區並獲得該特定國家/地區的運營商。 獲得響應后,我想根據響應創建自定義HTML,並在選定行后附加html。
以下是截圖,包括完整的工作流程:)
第2步
第3步
我建議為你想要顯示的每個動態HTML片段編寫一個自定義角度組件。 然后,您可以編寫一個循環組件,它將根據您提供的類型列表來*ngIf
嵌套組件。 像這樣:
// dynamic.component.ts
export type DynamicComponentType = 'country' | 'os' | 'osv';
export interface IOptions { /* whatever options you need for your components */ }
export type DynamicComponentOptions = { type: DynamicComponentType, options: IOptions};
@Component({
selector: 'app-dynamic',
template = `
<app-country *ngIf="current.type == 'country'" [options]="current.options" />
<app-os *ngIf="current.type == 'os'" [options]="current.options" />
<app-osv *ngIf="current.type == 'osv'" [options]="current.options" />
<ng-container *ngIf="!!subTypes">
<button (click)="dynamicSubComponentShow = !dynamicSubComponentShow" value="+" />
<app-dynamic *ngIf="dynamicSubComponentShow" [options]="subOptions" />
</ng-container>`,
// other config
})
export class DynamicComponent {
@Input() options: DynamicComponentOptions[];
get current(): DynamicComponentOptions {
return this.options && this.options.length && this.options[0];
}
get subOptions(): DynamicComponentOptions[] {
return this.options && this.options.length && this.options.slice(1);
}
dynamicSubComponentShow = false;
// component logic, other inputs, whatever else you need to pass on to the specific components
}
CountryComponent
示例。 其他組件看起來很相似。
// country.component.ts
@Component({
selector: 'app-country',
template: `
<div>Country label</div>
<p>Any other HTML for the country component using the `data` observable i.e.</p>
<span>x: {{ (data$ | async)?.x }}</span>
<span>y: {{ (data$ | async)?.y }}</span>
`,
})
export class CountryComponent {
@Input() options: IOptions;
data$: Observable<{x: string, y: number}>;
constructor(private countryService: CountryService) {
// load data specific for this country based on the input options
// or use it directly if it already has all your data
this.data$ = countryService.getCountryData(this.options);
}
}
// my.component.ts
@Component({
template: `
<div class="table" >
<div class="row" *ngFor="let rData of reportData$ | async; let i = index;" >
<div class="col" >
<app-dynamic [options]="options$ | async"></app-dynamic>
</div>
...
</div>
</div>`,
// other cmp config
})
export class MyComponent {
options$: Observable<DynamicComponentOptions[]>;
reportData$: Observable<ReportData>;
constructor(private reportService: ReportService){
// simplified version of your filter calculation
let apiFilters: {} = this.sFilters
.map(f => f[0])
.filter(f => f && f.values && f.values.length)
.reduce((f, acc) => acc[f.id] = f.values && acc, {});
this.reportData$ = reportService.getReportData(this.splitOpt[0].id, apiFilters).pipe(
filter(r => r.status == 1200),
map(r => r.data.split_by_data)
);
this.options$ = this.reportData$.pipe(map(d => d.YOUR_OPTIONS));
}
}
現在讓你的api返回類似的東西
{
"status": 1200,
"data": {
"YOUR_OPTIONS": [{
"type": "country"
"options" { "id": 1, ... } // options for your country component initialization
}, {
"type": "os",
"options" { "id": 11, ... } // options for your os component initialization
}, ...],
// your other report data for the main grid
}
}
請根據您的具體需求進行調整。 例如,您必須通過組件層次結構管理狀態傳遞(使用組件狀態,可觀察服務,MobX,NgRx - 選擇您的毒葯)。
希望這有所幫助 :-)
我不是在這里提出解決方案,因為我不知道你的代碼是什么。 但您可能需要考慮使用ViewContainerRef動態追加元素。 希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.