3

¡Buenas! Estoy haciendo una App para estudiar kanji, y quiero que una de las acciones es que se pueda ver un kanji aleatorio, hasta ahora lo he intentado de la siguiente manera, pero no consigo que coja un id aleatorio.

Estoy empezando con Angular pero aún no sé mucho, así que no sé si es un error de sintaxis o si me falta información para pasar al componente.


I'm making an application to study kanji, and I want one of the actions to be able to see a random kanji, so far I have tried it as follows, but I cannot get it to acquire a random id.

I'm starting with Angular but I don't know much yet, so I don't know if it's a syntax error or I'm missing some information to pass to the component.

kanji.list.component.html:

<button class="random" (click)="randomKanji(id, max)">Random Kanji</button>

kanji.service.ts:

getKanji(id: number): Observable<Kanji> {
    return of(KANJIS.find(kanji => kanji.id === id));
  }

randomKanji(id, max): Observable<Kanji> {
    id = Math.floor(Math.random() * max) + 1;
    return of(KANJIS.find(kanji => kanji.id === id));
  }

mock.kanjis.ts:

export const KANJIS: Kanji[] = [
    {
        id: 1,
        name: '一',
        onyomi: 'いち、いつ',
        kunyomi: 'ひと',
        meaning: 'Uno'
    }

Error: No capta los parámetros de la función que se aloja en el servicio. En cambio la función de getKanji() sí que la capta correctamente.

No capta los parámetros de la función que se aloja en el servicio

4
  • Buenas! te encuentras en StackOverflow en Español, por favor edita la pregunta al castellano, para que puedas ser ayudado. el 6 ago. 2020 a las 7:59
  • 1
    ¡Gracias! No me he dado cuenta de que estaba en el dominio español, ¡perdona! 🙇‍♀️ el 6 ago. 2020 a las 8:05
  • 1
    ¿No tienes ningún error en la consola del navegador? ¿Podrías añadir información sobre la constante (asumo) KANJIS? Parece un array, con lo que no sé si necesitarías usar el índice en lugar del ID del kanji a la hora de buscar algo aleatoriamente el 6 ago. 2020 a las 8:10
  • 1
    Por cierto, esta es una pregunta bien planteada, lo que tiene mérito extra por ser la primera que creas :). Aun así te recomiendo que completes el recorrido de bienvenida de bienvenida para ganarte otra medalla y de paso conocer un poco más el sitio. Bienvenida! el 6 ago. 2020 a las 8:30

1 respuesta 1

2

Tienes un método del componente que llamas cuando se pulsa un botón. El problema es que ese método devuelve un resultado, pero no haces nada con dicho resultado. Si esperas mostrar el elemento obtenido podrías simplemente guardarlo en un atributo del componente para usarlo, algo como lo siguiente:

<button class="random" (click)="randomKanji()">Random Kanji</button>
<span *ngIf="selectedKanji"> {{selectedKanji.onyomi}}</span>

Teniendo en el componente algo como:

class KanjiComponent {

  selectedKanji: Kanji;
  constructor(private kanjiServ: KanjiService) {}

  getRandomKanji() {
    this.selectedKanji = this.kanjiServ.randomKanji();
  }
}

Y en el servicio algo como:

  ...
  randomKanji(): Kanji {
    const id = Math.floor(Math.random() * KANJIS.length) + 1;
    return KANJIS[id];
  }

Como ves, si vas a buscar algo aleatorio en un array, no necesitas un ID o un límite, podemos eliminar los parámetros.

3
  • 1
    Has editado la pregunta añadiendo más detalles, así que he editado la respuesta para que esté acorde a lo aportado el 6 ago. 2020 a las 8:23
  • ¡Muchas gracias, ya me estaba volviendo un poco loca mirando a ver qué podía estar fallando! 😌 Ahora ya no me da error y me ha salido la información correctamente. ¿Qué forma habría de enlazarlo para fuese a otra página? Con la lista de kanjis he usado routerLink="/kanji/{{kanji.id}}", pero no sé cómo adaptarlo para que en el mismo click pueda hacer la función y cargar la otra página. el 6 ago. 2020 a las 8:57
  • Delega la carga en la siguiente página, el componente que se cargue debería usar el parámetro recibido y pedirlo al servicio el 6 ago. 2020 a las 9:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.