TypeScript新手求助：实现情绪与人脸图片匹配功能遇阻

Hey there! Let's get your InMemoryDbService working properly for your emotion-face matching feature. I can spot a couple of quick issues in your code snippet, and I'll walk you through a complete, working implementation.

First, Let's Fix the Syntax & Structure Issues #

Your current code has a couple of syntax errors and is missing the required return value for createDb(). Here's what's wrong:

• You have an extra curly brace in your emotions array ([{ { id: 11... should be [{ id: 11...)
• The createDb() method doesn't return the database object that Angular's in-memory web API expects

Working Implementation of in-memory-data.service.ts #

Here's a corrected version that includes both your emotions array and a faces array for the matching feature:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    // Emotion dataset with ID, name, and image path
    const emotions = [
      { id: 11, name: 'HAPPY', path: 'assets/images/happy-emotion.jpg' },
      { id: 12, name: 'SAD', path: 'assets/images/sad-emotion.jpg' },
      { id: 13, name: 'ANGRY', path: 'assets/images/angry-emotion.jpg' },
      { id: 14, name: 'SURPRISED', path: 'assets/images/surprised-emotion.jpg' }
    ];

    // Face image dataset (linked to emotions via emotionId)
    const faces = [
      { id: 21, imagePath: 'assets/images/face-happy.jpg', emotionId: 11 },
      { id: 22, imagePath: 'assets/images/face-sad.jpg', emotionId: 12 },
      { id: 23, imagePath: 'assets/images/face-angry.jpg', emotionId: 13 },
      { id: 24, imagePath: 'assets/images/face-surprised.jpg', emotionId: 14 }
    ];

    // Return the database object with both datasets
    return { emotions, faces };
  }
}

Key Things to Note #

• Return the Database Object: The createDb() method must return an object where each key is the name of a dataset (like emotions and faces), and the value is the array of items. This is how the in-memory API exposes these datasets as endpoints (e.g., /api/emotions and /api/faces).
• Consistent IDs: Make sure each item has a unique id—this helps with fetching, updating, and matching items later. I added an emotionId to the faces array to link each face to its corresponding emotion, which will simplify your matching logic.
• Valid Image Paths: Double-check that your image paths match where you've stored your assets in your Angular project (usually the assets/images folder).

Next Steps to Use This Service #

1. Register the Service: Make sure you've imported the HttpClientInMemoryWebApiModule in your AppModule and registered your InMemoryDataService:

import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

@NgModule({
  imports: [
    HttpClientModule,
    // The in-memory API will intercept HTTP requests and return simulated data
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 100 })
  ]
})
export class AppModule { }

2. Fetch Data in Your Component: Use Angular's HttpClient to fetch the emotions and faces data in your component:

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// Define interfaces for your data (optional but recommended for TypeScript)
interface Emotion {
  id: number;
  name: string;
  path: string;
}

interface Face {
  id: number;
  imagePath: string;
  emotionId: number;
}

export class MatchingComponent {
  emotions$: Observable<Emotion[]>;
  faces$: Observable<Face[]>;

  constructor(private http: HttpClient) {
    this.emotions$ = this.http.get<Emotion[]>('/api/emotions');
    this.faces$ = this.http.get<Face[]>('/api/faces');
  }
}

This setup will give you a working in-memory database with your emotion and face data, which you can then use to build your matching feature. Let me know if you run into any other snags!

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