Angular 5 + Firebase动态页面：如何从列表中获取子列表数据？

Alright, let's walk through how to implement this based on your database structure and page requirements. I'll use common frontend patterns (with Angular-like syntax since you mentioned this.project, but the core logic applies to other frameworks too) to make this concrete.

Step 1: Fetch and Display Projects on the Home Page #

First, you need to pull the projects data from your Profile.UID structure and render the name and url for each project.

Component Logic (Home Page) #

In your home page component, fetch the user's profile data and extract the projects. Since projects is an object with unique KEY properties as keys, convert it to an array to loop through:

// Home component code example
export class HomePage {
  projects = [];

  constructor(private dataService: YourDataService) {}

  async ngOnInit() { // or mounted() for Vue, useEffect for React
    // Fetch the full Profile data from your database
    const userProfile = await this.dataService.getProfile();
    // Convert the projects object to an array (since each entry is keyed by project KEY)
    this.projects = Object.values(userProfile.UID.projects);
  }

  // Handle navigation to project detail page
  goToProjectDetail(project) {
    // Pass the project's unique KEY to the detail page (via route params, state, etc.)
    this.router.navigate(['/project-detail', project.key]); // Adjust route path as needed
  }
}

Home Page Template #

Render each project's name and url, and add a click handler to navigate to the detail page:

<!-- Home page template -->
<div class="project-grid">
  <div 
    *ngFor="let project of projects" 
    (click)="goToProjectDetail(project)"
    class="project-card"
  >
    <h3>{{ project.name }}</h3>
    <a [href]="project.url" target="_blank" rel="noopener">{{ project.url }}</a>
  </div>
</div>

Step 2: Fetch and Display Project Details #

On the detail page, retrieve the specific project using the KEY passed from the home page, then access its info.title and info.description.

Component Logic (Detail Page) #

Grab the project KEY from the route parameters, then fetch the corresponding project from your database:

// Project detail component code example
export class ProjectDetailPage {
  project = null;

  constructor(
    private route: ActivatedRoute,
    private dataService: YourDataService
  ) {}

  async ngOnInit() {
    // Get the project KEY from the route
    const projectKey = this.route.snapshot.paramMap.get('projectKey');
    
    if (projectKey) {
      const userProfile = await this.dataService.getProfile();
      // Fetch the specific project using its KEY
      this.project = userProfile.UID.projects[projectKey];
    }
  }
}

Detail Page Template #

Render the project's title and description once the project data is loaded:

<!-- Project detail template -->
<div *ngIf="project" class="project-detail">
  <h1>{{ project.info.title }}</h1>
  <p class="description">{{ project.info.description }}</p>
</div>

Key Notes #

• Data Fetching: I used a YourDataService as a placeholder—replace this with your actual database access logic (Firebase, REST API, etc.).
• Project Identification: The KEY from your database structure is crucial here—it's how you uniquely identify which project to load on the detail page.
• Framework Adaptation: If you're using Vue/React, the logic is identical: fetch projects, loop to render, pass the project key on click, fetch the specific project in the detail page, then render info.title and info.description.

内容的提问来源于stack exchange，提问作者Angulandy2