Cómo mostrar las respuestas en el listado

Clase 15 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Tomar examen

Resumen

Para recodar:

El Question Model inicia siendo un array vacío y para este punto del proyecto ya tiene un listado de respuestas.
Angular nos permite, que cada que modifiquemos los objetos que estamos mostrando en la pantalla, los atributos de esos objetos se van a ver reflejados en la pantalla a medida que cambian.

Comentarios

Jesus Sandrea

student•

Pendiente aquí!! Cuando puse @input me tiraba un erro diciendo que input no esta definido, deben poner la i en mayuscula @Input

Carlos Enrique Ramírez Flores

student•

Raul Arturo Valdivia Cruz

student•

tengo inconvenientes para mostrar la respuesta en pantalla, tengo todo igual.
podra ser por la version de angular ?

Carlos Murillo

student•

El curso no esta en su mejor momento (2021/Angular v12), es un hecho, sin embargo es posible seguir el paso del profesor con un poco de atencion, razonamiento y ayuda en linea.

Si encuentran errores como "Property 'question' has no initializer and is not definitely assinged in the constructor" se puede arreglar la linea del error cambiando la sentencia (por ejemplo) "@Input() question!: Question".

Asi como otro error tipo "Object is possibly 'undefined'." se puede arreglar la linea del error cambiando la sentencia (por ejemplo) "answer.user?.firstName".

wesly hernandez

student•

Hola Sacha, tengo un pequeño problema. no entiendo porque me sale underfined, en los nombre y apellido del usuario.

Andrs

student•

me pasaba lo mismo, asegúrate que estas llamando bien la información del objeto {{ answer.user.firstname }} {{ answer.user.lastname }} en mi caso, tenía lastName, lo corregí cambiando a minúscula la ‘n’

Carlos Alberto García Rosales

student•

Argument of type ‘typeof Question’ is not assignable to parameter of type ‘Question’.Property ‘title’ is messing in type ‘typeof Question’.
Alguien con el mismo problema de tipos?

Walter Lensinas

student•

Buenas tardes, paso el código del curso:

Hacer un git clone del proyecto, ejecutar npm install y ng serve

Carlos Alberto García Rosales

student•

Parece que toca una actualización de este curso muchas cosas han cambiado en cuando a los componentes de material. Con mucha pena tendre que dejar el curso aqui.

Diego Esteban Cortés Escandón

student•

Yo estoy ahora con el curso con angular 7 y no tengo ningún problema saludos!

Edwin Yohany Duque Yara

student•

Tengo un problema, me sale un error: TypeError: Cannot read property 'answers' of undefined at AnswerFormComponent.onSubmit

<mat-card>
    <mat-card-header>
        <div mat-card-avatar>
            <i class="{{question.icon}} icon" ></i>
        </div>
        <mat-card-title>
            <h2>{{question.title}}</h2>
        </mat-card-title>
        <mat-card-subtitle>
            <small>Edwin Duque - {{question.createdAt | amTimeAgo:'es'}}</small>
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>{{question.description}}</p>
    </mat-card-content>
</mat-card>
<div class="answers">
    <h3>Respuestas</h3>
    <ul class="answers-list" *ngIf="question.answers.length > 0">
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
    </ul>
    <p *ngIf="question.answers.length === 0">Sé el primero en responder esta pregunta</p>
    <app-answer-form [question]='question' class="answer-form"></app-answer-form>
</div>

import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer, User } from './answer.model';
import { Question } from '../question/question.model';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styles: [`
    form {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 40px auto;
      margin-top: 20px;
    }
  `]
})
export class AnswerFormComponent {
  @Input() question: Question;

  onSubmit(form: NgForm) {
    const answer = new Answer(
      form.value.description,
      this.question,
      new Date(),
      new User('Paula', 'Becerra')
    );
    this.question.answers.unshift(answer);
    form.reset();
  }
}

no veo el error

Edwin Yohany Duque Yara

student•

El error estaba en el ts module. llevaba un dia completo sin saber la razon.

Alonso Alejandro Zúñiga Beltrán

student•

Para el nombre completo una buena práctica sería hacer un método similar a:

  getFullName() {
    return [this.firstName, this.lastName].join(' ');
// o...
//  return`${this.firstName} ${this.lastName}`;
  }

Alonso Alejandro Zúñiga Beltrán

student•

Acabo de ver la siguiente lección…

Meler Carranza Silva

student•

Hola!
Por alguna razón no se produce el evento submit al presionar el botón del formulario, por lo tanto, no se esta ejecutando el método OnSubmit del AnswerFormComponent… Le paso a alguien??

Diego Forero

Team Platzi•

Comparte tu código para ayudarte a encontrar el problema, así es difícil saber que puede estar pasando, puede ser un error de digitación que este haciendo que falle.

No sale ningún error en consola?

Hernán Giraldo

student•

Sacha, buenas tardes!

Estoy teniendo un inconveniente con la recepción de la pregunta (question) en el componente <<answer>>.
Cuando hago un console log en el constructor de <<AnswerFormComponent>> puedo observar que éste se ejecuta múltiples veces. Además, cuando trato de imprimir esa <<question>> adentro de un setTimeout(), veo que se imprime las 2 primeras veces, pero a la 3ra vez, se imprime un undefined.

Te agradecería la ayuda con este inconveniente. Te agrego la url del repositorio:

Alexander Rosero

student•

Hola, cual es el paquete que usan para que diga los errores que estamos teniendo en el codigo?.

Diego Forero

Team Platzi•

Es un linter, existen muchos, busca es linter puedes usar este

Jorge Hernandez Rozo

student•

Como puedo Solucionar ese error ?

Diego Forero

Team Platzi•

Creo que no es questions si no question.
https://platzi.com/clases/mean/concepto/el-frontend-de-platzioverflow/agregando-la-respuesta-al-lista-3/material/?time=202

Omar Alfonso Sepúlveda Cordón

student•

Hola, quisiera que me ayudaran con este error. En mi caso se ejectuta el nombre y la hora pero el comentario no se agrega y tampoco se limpia el textarea. Gracias

David Toca

student•

Hola, por favor pon tu codigo aqui para poder ayudarte, probablemente sea algun error de tipado

Abner Saavedra

student•

Hola, se me presento el siguiente error:
ERROR TypeError: Cannot read property ‘answers’ of undefined
at AnswerFormComponent.webpackJsonp…/…/…/…/…/src/app/answer/answer-form.component.ts.AnswerFormComponent.onSubmit (answer-form.component.ts:36)

export class AnswerFormComponent{

@Input() question: Question;
	onSubmit(form: NgForm){
     console.log(form.value.description);
     const answer = new Answer( 
     	form.value.description,
     	this.question,
     	new Date(),
     	new User('Abner', 'Saavedra')
     	 );
       this.question.answers.unshift(answer);
       form.reset();
	}
}```

Abner Saavedra

student•

El error es que la instancia de Question question esta indefinida.

import { Component, Input } from ‘@angular/core’;
import { NgForm } from ‘@angular/forms’;
import { Answer, User } from ‘./answer.model’;
import { Question } from ‘…/questions/question.model’;

@Component({

selector: ‘app-answer-form’,
templateUrl: ‘./answer-form.component.html’,
styles: [`

form {

display: flex;
flex-direction: column;
width: 90%;
margin: 40px auto;
margin-top: 20px;

}

})

export class AnswerFormComponent{

@Input() question: Question;

onSubmit(form: NgForm){
 //console.log(form.value.description);
  var answer = new Answer( 
 	form.value.description,
 	this.question,
 	new Date(),
 	new User('Pepito', 'Gomez')
 	 );
  //this.question.answers.unshift(answer);
  console.log(answer.description+' '+answer.createdAt+' '+answer.user.firstnaName+' '+answer.user.lastName);
  console.log(answer.question);
   form.reset();
}

}

<mat-card> <mat-card-header> <div mat-card-avatar> <i md-list-icon class="{{ question.icon }} icon" ></i> </div> <mat-card-title> <h2>{{ question.title }}</h2> </mat-card-title> <mat-card-subtitle> <small>Abner Saavedra - {{ question.createdAt | amLocale: ‘es’ | amTimeAgo }}</small> </mat-card-subtitle> </mat-card-header> <mat-card-content> <p>{{ question.description }}</p> </mat-card-content> </mat-card> <div class=“answers”> <h3>Respuestas</h3> <ul class=“answers-list” \*ngIf=“question.answers?.length > 0”> <li \*ngFor=“let answer of question.answers”> <h5> {{ answer.user.firstName }} {{ answer.user.lastName }} <small> {{answer.createdAt | amLocale: ‘es’ | amTimeAgo}}</small></h5> <p class=“description”> {{ answer.description }} </p> </li> </ul> <p \*ngIf=“question.answers?.length === 0”> Se el primero en responder</p> <app-answer-form [question]=“Question” class=“answer-form”></app-answer-form>

Hola Tue Mar 20 2018 18:03:03 GMT-0400 Pepito Gomez
answer-form.component.ts:40 undefined

Jose Osses Plaza

student•

holaaa

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:2991
upa answer-form.component.ts:28:8 ```


me pasa eso el tema que no me guarda los objetos en el array y por ende solo me muestra el mensaje Sé el primero en responder esta pregunta ...  no se como mejorarlo 

porque estoy utilizando la ultima version de angular y tengo esto 
 y en el html tengo esto

<mat-form-field class="example-full-width">
    <textarea matInput
     placeholder=" Respuesta" 
     name="description"
     ngModel></textarea>
  </mat-form-field>  
  <button type="submit" mat-raised-button color="accent" >Responder</button>

</form>```

y en el ts

import { Component, OnInit, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer, User } from './answer.model'
import { Question } from '../question/question.model'

@Component({
    selector:'app-answer-form',
    templateUrl: './answer-form.component.html',
    styles: [`
    form{
        display: flex;
        flex-direction: colum;
        width: 90%;
        margin: 40px auto;
        margin-top: 20px;
    }
    
    `]

})
export class AnswerFormComponent {
    

   
    @Input() question: Question;
        
    onSubmit(form: NgForm) {
        console.log(form.value.description);
        const answer = new Answer(
            form.value.description,
            this.question,
            new Date(),
            new User('paula', 'colhelio')
        );
        this.question.answers.unshift(answer);
        form.reset();
     

    }
}```


 y en el principal tengo

<mat-card> <mat-card-header> <div class=“icon” mat-card-avatar> <mat-icon class={{question.icon}} ></mat-icon> </div> <mat-card-title> <h2>{{question.title}}</h2> </mat-card-title> <mat-card-subtitle> <small>Jose Osses -{{question.createdAt | amLocale:‘es’ | amTimeAgo}}</small> </mat-card-subtitle> </mat-card-header> <mat-card-content> <p>{{question.description}}</p> </mat-card-content> </mat-card> <div class=‘answer’> <h3>Respuestas</h3> <ul class=‘answerlist’ \*ngIf=‘question.answers.lenght > 0’ >

  <li *ngFor="let answer of question.answers">
      <h5>
        {{answers.user.firstName}} 
      </h5>
      <p class= "description">
        el miedo es una fuerza que reprime a quienes no estan seguros del amor que tienen
        {{answer.description}}  {{answers.description}}
      </p>

    </li>

</ul> <p \*ngIf= “question.answers.length === 0”>Sé el primero en responder esta pregunta</p> <app-answer-form class=“answer-form”></app-answer-form> </div>

estare muy contento de leer una orientacion sobre mi problema

Alexander Rosero

student•

Saludos, no he podido mostrar el nombre del usuario, siempre me sale en blanco, he puesto un console log para validar que answer.user.firstName tenga el nombre del usuario y efectivamente lo tiene, pero cuando correo el programa no lo agrega en el navegador.

<mat-card>
    <mat-card-header>
        <div mat-card-avatar>
            <i class="{{question.icon}} icon" ></i>
        </div>
        <mat-card-title>
            <h2>{{question.title}}</h2>
        </mat-card-title>
        <mat-card-subtitle>
            <small>Edwin Duque - {{question.createdAt | amTimeAgo:'es'}}</small>
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>{{question.description}}</p>
    </mat-card-content>
</mat-card>
<div class="answers">
    <h3>Respuestas</h3>
    <ul class="answers-list" *ngIf="question.answers.length > 0">
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
        <li>
            <h5>David Duque
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                Yo tengo la respuesta
            </p>
        </li>
    </ul>
    <p *ngIf="question.answers.length === 0">Sé el primero en responder esta pregunta</p>
    <app-answer-form [question]='question' class="answer-form"></app-answer-form>
</div>  

import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer, User } from './answer.model';
import { Question } from '../question/question.model';

@Component({
  selector: 'app-answer-form',
  templateUrl: './answer-form.component.html',
  styles: [`
    form {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 40px auto;
      margin-top: 20px;
    }
  `]
})
export class AnswerFormComponent {
  @Input() question: Question;

  onSubmit(form: NgForm) {
    const answer = new Answer(
      form.value.description,
      this.question,
      new Date(),
      new User('Paula', 'Becerra')
    );
    this.question.answers.unshift(answer);
    form.reset();
  }
}

export class AnswerFormComponent{

@Input() question: Question;
	onSubmit(form: NgForm){
     console.log(form.value.description);
     const answer = new Answer( 
     	form.value.description,
     	this.question,
     	new Date(),
     	new User('Abner', 'Saavedra')
     	 );
       this.question.answers.unshift(answer);
       form.reset();
	}
}```

onSubmit(form: NgForm){
 //console.log(form.value.description);
  var answer = new Answer( 
 	form.value.description,
 	this.question,
 	new Date(),
 	new User('Pepito', 'Gomez')
 	 );
  //this.question.answers.unshift(answer);
  console.log(answer.description+' '+answer.createdAt+' '+answer.user.firstnaName+' '+answer.user.lastName);
  console.log(answer.question);
   form.reset();
}

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:2991
upa answer-form.component.ts:28:8 ```


me pasa eso el tema que no me guarda los objetos en el array y por ende solo me muestra el mensaje Sé el primero en responder esta pregunta ...  no se como mejorarlo 

porque estoy utilizando la ultima version de angular y tengo esto 
 y en el html tengo esto

<mat-form-field class="example-full-width">
    <textarea matInput
     placeholder=" Respuesta" 
     name="description"
     ngModel></textarea>
  </mat-form-field>  
  <button type="submit" mat-raised-button color="accent" >Responder</button>

import { Component, OnInit, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Answer, User } from './answer.model'
import { Question } from '../question/question.model'

@Component({
    selector:'app-answer-form',
    templateUrl: './answer-form.component.html',
    styles: [`
    form{
        display: flex;
        flex-direction: colum;
        width: 90%;
        margin: 40px auto;
        margin-top: 20px;
    }
    
    `]

})
export class AnswerFormComponent {
    

   
    @Input() question: Question;
        
    onSubmit(form: NgForm) {
        console.log(form.value.description);
        const answer = new Answer(
            form.value.description,
            this.question,
            new Date(),
            new User('paula', 'colhelio')
        );
        this.question.answers.unshift(answer);
        form.reset();
     

    }
}```


 y en el principal tengo

  <li *ngFor="let answer of question.answers">
      <h5>
        {{answers.user.firstName}} 
      </h5>
      <p class= "description">
        el miedo es una fuerza que reprime a quienes no estan seguros del amor que tienen
        {{answer.description}}  {{answers.description}}
      </p>

    </li>

Cómo mostrar las respuestas en el listado

Introducción al Curso de MEAN

Bienvenidos al Curso de MEAN

¿Qué es MEAN?

El Frontend de PlatziOverflow

Introducción a Angular y TypeScript

Instalación y configuración del entorno

Trabajando con Angular Material

Construcción del header de la aplicación

Detalles de preguntas para el proyecto

Construcción de pantalla de detalle de una pregunta

Estilo en la pantalla de detalle de una pregunta

Incorporando angular2-moment al proyecto

Agregando el listado de respuestas a la pantalla de detalle

Agregando un formulario para respuestas

Dando estilo al formulario de preguntas

Corrigiendo estilos en el formulario y toques finales