Question

这里有打字稿的新手。我正在尝试拥有一系列情感和一系列人物必须匹配的图像（面孔）。到目前为止，我已经尝试在内存数据库服务中使用，但没有运气，并且已经挣扎了一段时间。任何建议帮助将不胜感激。

内存-data.service.ts

import {
InMemoryDbService
} from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
    createDb() {
      const emotions = [{
     { id: 11, name: 'HAPPY1', path: 'clip.jpg' },
     { id: 12, name: 'HAPPY2', path: '../../assets/mood.jpg' },
     { id: 13, name: 'HAPPY3', path: '../../assets/mood.jpg' },
     { id: 14, name: 'HAPPY4', path: '../../assets/mood.jpg' },
     { id: 15, name: 'HAPPY5', path: '../../assets/mood.jpg' },
    ];


   const faces= [
  { id: 11, name: 'HAPPY' },
  { id: 12, name: 'SAD' },
  { id: 13, name: 'ANGRY' },
  { id: 14, name: 'EXCITED' },
  { id: 15, name: 'ANXIOUS' },


];

return {faces, emotions};
}
   }

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Emotion } from 'emotion';
import { EmotionService } from 'emotion.service';
import { FaceService } from 'face.service';
import { Face } from 'face';


@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  emotions: Emotion[] = [];
  faces: Face[] = [];

  constructor(private emotionService: EmotionService, private faceService: FaceService) { }

  ngOnInit() {
    this.getEmotions();
    this.getFaces();

    /*
 imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = '../../assets/mood.jpg';

imgArray[1] = new Image();
imgArray[1].src = '../../assets/mood.jpg';

/* ... more images ... 

imgArray[2] = new Image();
imgArray[2].src = '../../assets/mood.jpg'; */
}
    //if clicked, game starts
    show: boolean = true;


    //using these methods just to check if button click is sending somewhere( opens alert box)
    submitFace(event, f: string){
    console.log(f);
    alert('Open: ' + f);
    }

    submitEmotion(event, e: string,  f: string){
    //console.log("Random number: " Math.floor(Math.random() * 9) + "emotion: " + e);//would like that only 1 random face appeared each time
    alert('Open: ' + e + f);
   //if (emotion == face ){
    //alert('win: ' + e);
    // if (emotion != face ){
    //alert('win: ' + face);
   // }
   // }
    }


   //  this.emotions =  this.emotionService.getEmotions().filter(x => x.id == this.emotionId)[0];


  //getMAtch(): void{
  //var matches_array = this.emotionService.getEmotions().match(this.faces)
  //console.log(matches_array);




  //will be images, want one to appear in each itteration 
  getFaces(): void {

    this.faceService.getFaces().subscribe(faces => this.faces = faces.slice(0, 1));

  }
    //want all to appear in each itteration
  getEmotions(): void {

    this.emotionService.getEmotions().subscribe(emotions => this.emotions = emotions.slice(0, 2));
  }

  /*
 nextImage(element: string){
   img = document.getElementById(element);

    for( i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) // << check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}
*/

} //end bracket

dashboard.component.html

<div class="grid grid-pad">

  <a *ngFor="let face of faces" class="col-1-3" (click)="submitEmotion($event, face.name)" routerLink="/detail/{{face.id}}" img [attr.src]="face.path">
    <div class="module face">
    <h4>{{face.path}}</h4>
    </div>
   </a>

<div class="grid grid-pad">
  <a *ngFor="let emotion of emotions" class="col-1-3"  (click)="submitEmotion($event, emotion.name)" routerLink="/detail/{{emotion.id}}">
    <div class="module emotion">

    <h4>{{emotion.name}}</h4>
    </div>
    </a>
  </div>

<emotion-search></emotion-search>
<face-search></face-search>

Answer 1

我对Angular并不熟悉，所以我不确定你是否有某些具体因素导致问题。

然而，真正细致地将您的程序分解成越来越小的部分，并使用console.log查看它是否按预期运行可能有所帮助：

例如在你的getFaces方法中：

getFaces(): void {

  this.faceService.getFaces().subscribe(faces => this.faces = faces.slice(0, 1));

...尝试退出每个人。

}

getFaces(): void {
  console.log('in getFaces method');

  this.faceService.getFaces().subscribe(faces => {
    console.log(' - subscribing')
    console.log(' - faces', faces);

    const slice = faces.slice(0, 1);

    consolt.log(' - slice', slice);

    this.faces = slice;
  });
}

面孔存在吗？第一个元素是你所期望的吗？例如，你真的想要一个数组（faces.slice(0, 1);），或者数组中的第一个面（faces[0]）吗？

对每个组件重复此过程。

将图像与打字稿匹配

1 个答案: