我有一个列表项目，点击单个项目我试图显示div包含的内部列表
<div>
<ol>
<li *ngFor="let guide of userGuideData; let i=index">
<a (click)="selectedIndex=i">{{guide.title}}</a>
<div *ngIf="selectedIndex === 0">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
<div *ngIf="selectedIndex === 1">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
<div *ngIf="selectedIndex === 2">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
<div *ngIf="selectedIndex === 3">
<span>{{selectedIndex}}-{{gpopo}}</span>
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
<div *ngIf="selectedIndex === 4">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
</li>
</ol>
</div>
我为单个列表设置了单独的div，因为我想以不同的方式显示每个内部列表。问题我面临的问题是，当我点击父列表时，所有列表都会被扩展，并且点击的索引值将应用于所有父列表。我只希望扩展点击的列表。我究竟做错了什么？请建议。 Plunker link
答案 0 :(得分：0)
只有selectedIndex适用于所有人。你需要具体。
更新您的代码如下
<li *ngFor="let guide of userGuideData; let i=index">
<a (click)="selectedIndex = i">{{guide.title}}</a>
<div *ngIf="selectedIndex == i">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
</li>
答案 1 :(得分：0)
我建议不要坚持索引，因为这种方法不会随着时间的推移而扩展并导致代码重复。我的建议是在每个数据对象中引入新字段。您可以使用客户端上的循环来完成此操作。然后根据该字段进行折叠/展开。请参阅 app.ts 的以下更新代码：
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<ol>
<li *ngFor="let guide of userGuideData; let i=index">
<a (click)="toggleGuide(guide)">{{guide.title}}</a>
<div *ngIf="guide.isExpanded">
<ol>
<li *ngFor="let desc of guide.description">{{desc}}</li>
</ol>
</div>
</li>
</ol>
</div>
`,
})
export class App {
name:string;
public userGuideData: any = [
{
title: 'Pre-requisities',
description: ['Windows 10, i7/i5, 8GB/16GB RAM, HDD 300GB/500GB',
'Total size of the deployment : 1.75 GB. The system should atleast have 2GB free space'
]
},
{
title: 'Installation Guide',
description: ['Step 1: Install Docker. a) For Windows: Follow the instructions from the link https://docs.docker.com/docker-for-windows/install/#download-docker-for-windows and install the latest stable version of docker. b) For Mac: Follow the instructions from the link https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac and install the latest stable version of docker. Alternatively you can also use homebrew to install docker',
'Step 2: Once the docker installation is completed. Open the docker settings and go to advanced settings tab. On Windows increase the CPUs to 2 and Memory to 3GB. On Mac you can set it upto 4 CPUs and Memory of 6GB',
'Step 3: Unzip the deploymentpackage.zip file. Traverse to this folder on command line and execute the start.sh shell script. During the first time, setup will take time(minimum around 30 mins) to finish as we are downloading images to the local. For the subsequent runs it will take only few minutes to set up, depending on the speed of the system. Once the set up is done the console will display a message given below.',
'Step 4: Once the set up is successful. Open any browser and enter http://localhost:8080. Make sure to free the 8080 port on your local system',
'Step 5: Login page appears. Enter the username ‘admin’ and password ‘admin’ and login to the tool.',
'Step 6: On launch you will be directed to the HomePage. Upload a zip file with the configurations, using the Upload configurations button. The input file should have a “.zip” extension only. Each device configuration in the zip file should end with a “.txt” extension only.',
'Step 7: Once the upload is successful you will be directed to the Reports page. Initially the tables in the page will be empty. Click the Refresh button recursively to see the current status of the execution. Once all the devices are processed, press the Download Reports button to download the report in an excel format. Please note that since this is a streaming architecture based application, there will not be any message rendered to signify the completion of the execution. This feature will be provided in the upcoming releases.',
'Step 8: For further uploads navigate to the Homepage and follow Steps 6 and 7',
'Step 9: For exiting the application, press cross button on the browser.',
'Step 10: For exiting the docker, execute the stop.sh shell script given in the deploymentpackage.zip. This will make sure the system is cleaned up(which mean that all data will erased)',
'Note: Please download the reports before exiting the docker',
]
},
{
title: 'Known issues',
description: ['Once the docker is stopped, the data will not be persisted. Download the reports and store them for future reference',
'The end of report generation will not be notified to the user. The latest status can be known by clicking the refresh button recursively',
'Configs with insufficient data are highlighted in the Fallout section of the report. Refer to the “fallout” sheet in the downloaded report for the same',
'This tool is not production ready. To make it production ready, tool needs to go through CSDL compliance process'
]
},
{
title: 'Performance Statistics under lab conditions',
description: ['First time application set up time: 27-30 mins',
'Total size of the deployment : 1.75 gb',
'Tool execution Time 100 configurations of a total 2.5MB takes around 3 mins. 500 configurations of a total 13MB takes around 15.30 mins. 1000 configurations of a total 16MB takes around 27 mins',
'7 valid configs shared by the NCEs have been modified to come up to the numbers of 100,500 and 1000 for testing. Note that this is just a ball park data'
]
},
{
title: 'CDET details',
description: ['Project: CSC.cacsp',
'Product: mig-sda-dna',
'Component: ui/backend/ic',
'Version: v0.5'
]
},
{
title: 'Team alias',
description: ['abc@abc.com']
},
{
title: 'FAQ',
description: ['Whom to contact for issues related to tool? Answer: Send all queries to team alias abc@abc.com',
'How to check if the processing of the upload is complete? Answer: Once the upload is successful you will be directed to the Reports page. Initially the tables in the page will be empty. Click the Refresh button recursively to see the current status of the execution. All valid configurations will be displayed in the Summary tab, the invalid configurations will be displayed in the Fallout tab',
'How to do crash recovery ? Answer: Since this is an on prem docker based deliverable, there will be times when the application might crash if the system resources are not sufficient. In case you face such issues we recommend you to restart the application and/or increase the docker resources by following the Step 2 of installation guide section. If the issue still persists report the same',
'Can this tool be used for customer deliverables? Answer: A strict “NO”. The tool is not security compliant and should not be used for processing customer data. Future releases will be addressing this issue'
]
}
]
constructor() {
this.userGuideData.forEach((element) => {
element.isExpanded = false;
}
}
toggleGuide(guide) {
guide.isExpanded = !guide.isExpanded;
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Working Plunker在这里：https://plnkr.co/edit/VfnH4XCoqyxjo1zfJzUx?p=preview