Dando estilo al formulario de preguntas

Clase 13 de 75 • Curso de MEAN 2017

Alvaro Gonzalez

student•

Problema de typo en lenght, es de la siguiente forma

<ul class="answers-list" *ngIf="question.answers.length > 0">

Mike Nieva

teacher•

Si. Aquí los typo’s pueden ser más frecuentes. Toca estar atentos.

Gracias Alvaro.

Adrian Camilo Caminos

student•

les recomiendo que lo usen asi con el condicion?.length para que valide como es angular 2 en adelante las variables cambian un poco

<code><ul class="answer-list" *ngIf="question.answer?.length > 0">

Adrian Camilo Caminos

student•

es importante usar >> ? <<

Carlos Enrique Ramírez Flores

student•

gracias me funciono perfecto!

question.answer?.length```

daniel felipe mora vargas

student•

A mí no me mostraba las condiciones así que lo resolví de la siguiente manera....

<ul class="answers-list" *ngIf="question.answers?.length > 0; then thenBlock else elseBlock">
        <ng-template #thenBlock>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
    </ng-template>
    </ul>
    <ng-template #elseBlock>Sé el primero en responder la pregunta!</ng-template> ```

Herdic Asmeth Diaz Munevar

student•

con dos iguales va ha funciona perfectamente.

Sergio Toshio Minei

student•

Ocultar Elementos (ngIf)

Para ocultar elementos HTML, se va a usar *ngIf. Si se cumple la condición, se muestra el elemento, de lo contrario se oculta.

<p *ngIf="answers.length === 0">Hola Mundo</p>

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Carlos Enrique Ramírez Flores

student•

Gracias, excelente aporte el de tu resumen.

Carlos Enrique Ramírez Flores

student•

no me funciono, lo que si funciono fue

ngIf="question.answer?.length```

Walter Lensinas

student•

Buenas tardes, les paso el código de la clase:

Herdic Asmeth Diaz Munevar

student•

Muy feliz con mi curso MEAN

Wigilabs S.A.S

student•

También se puede utilizar le IfElse de angular.

<div class="answers">
    <h3>Respuestas</h3>
    <ul *ngIf="question.answers.length !== 0; else noAnswer" class="answers-list">
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
    </ul>
    <ng-template #noAnswer>
        <p>Sé el primero en responder esta pregunta.</p>
    </ng-template>
    <app-answer-form></app-answer-form>
</div>```

Angel Eduardo Trujillo Alvarado

student•

Me podrían ayudar por favor. Tengo problemas al momento de agregar las condiciones en el HTML, al poner

<ul class="answers-list" *ngIf="question.answers.length > 0">

<p *ngIf="quesiton.answers.length ===0">Sé el primero en responder</p>```

practicante se quita todo lo que aparecía. y me aparece este error:

ERROR TypeError: Cannot read property 'answers' of undefined
    at Object.eval [as updateDirectives] (QuestionDetailComponent.html:48)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689)
    at checkAndUpdateView (core.js:13836)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callWithDebugContext (core.js:15090)

Diego Forero

Team Platzi•

tienes un typo es question no quesiton, en el p del ngIf

Angel Eduardo Trujillo Alvarado

student•

Muchísimas gracias Diego, un error tan pequeño como causa tantos problemas…
Saludos!!

Jose Osses Plaza

student•

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:2991

este es el erorr que me aparece en la consola de otra lugar

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:2991 ```

Jose Osses Plaza

student•

ahora creo que me sale esto [WDS] Disconnected! client:176
ERROR TypeError: "_co.question.answer is undefined"
View_QuestionDetailComponent_0ng:///AppModule/QuestionDetailComponent.ngfactory.js:74:13debugUpdateDirectiveshttp://localhost:4200/vendor.js:52103:12checkAndUpdateViewhttp://localhost:4200/vendor.js:51500:5callViewActionhttp://localhost:4200/vendor.js:51741:21execComponentViewsActionhttp://localhost:4200/vendor.js:51683:13checkAndUpdateViewhttp://localhost:4200/vendor.js:51506:5callViewActionhttp://localhost:4200/vendor.js:51741:21execComponentViewsActionhttp://localhost:4200/vendor.js:51683:13checkAndUpdateViewhttp://localhost:4200/vendor.js:51506:5callWithDebugContexthttp://localhost:4200/vendor.js:52393:22debugCheckAndUpdateViewhttp://localhost:4200/vendor.js:52071:12detectChangeshttp://localhost:4200/vendor.js:49887:13tickhttp://localhost:4200/vendor.js:45776:58tickhttp://localhost:4200/vendor.js:45776:13_loadComponenthttp://localhost:4200/vendor.js:45810:9bootstraphttp://localhost:4200/vendor.js:45752:9_moduleDoBootstraphttp://localhost:4200/vendor.js:45552:74_moduleDoBootstraphttp://localhost:4200/vendor.js:45552:13bootstrapModuleFactoryhttp://localhost:4200/vendor.js:45519:21invokehttp://localhost:4200/polyfills.js:2710:17onInvokehttp://localhost:4200/vendor.js:45018:24invokehttp://localhost:4200/polyfills.js:2709:17runhttp://localhost:4200/polyfills.js:2460:24scheduleResolveOrRejecthttp://localhost:4200/polyfills.js:3194:29invokeTaskhttp://localhost:4200/polyfills.js:2743:17onInvokeTaskhttp://localhost:4200/vendor.js:45009:24invokeTaskhttp://localhost:4200/polyfills.js:2742:17runTaskhttp://localhost:4200/polyfills.js:2510:28drainMicroTaskQueuehttp://localhost:4200/polyfills.js:2917:25 QuestionDetailComponent.html:22:3
ERROR CONTEXT
Object { view: {…}, nodeIndex: 27, nodeDef: {…}, elDef: {…}, elView: {…} }
QuestionDetailComponent.html:22:3
Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:2991
ERROR TypeError: "_co.question.answer is undefined"
View_QuestionDetailComponent_0ng:///AppModule/QuestionDetailComponent.ngfactory.js:74:13debugUpdateDirectiveshttp://localhost:4200/vendor.js:52103:12checkAndUpdateViewhttp://localhost:4200/vendor.js:51500:5callViewActionhttp://localhost:4200/vendor.js:51741:21execComponentViewsActionhttp://localhost:4200/vendor.js:51683:13checkAndUpdateViewhttp://localhost:4200/vendor.js:51506:5callViewActionhttp://localhost:4200/vendor.js:51741:21execComponentViewsActionhttp://localhost:4200/vendor.js:51683:13checkAndUpdateViewhttp://localhost:4200/vendor.js:51506:5callWithDebugContexthttp://localhost:4200/vendor.js:52393:22debugCheckAndUpdateViewhttp://localhost:4200/vendor.js:52071:12detectChangeshttp://localhost:4200/vendor.js:49887:13tickhttp://localhost:4200/vendor.js:45776:58tickhttp://localhost:4200/vendor.js:45776:13nexthttp://localhost:4200/vendor.js:45669:99invokehttp://localhost:4200/polyfills.js:2710:17onInvokehttp://localhost:4200/vendor.js:45018:24invokehttp://localhost:4200/polyfills.js:2709:17runhttp://localhost:4200/polyfills.js:2460:24runhttp://localhost:4200/vendor.js:44932:16nexthttp://localhost:4200/vendor.js:45669:69schedulerFnhttp://localhost:4200/vendor.js:44750:36__tryOrUnsubhttp://localhost:4200/vendor.js:95430:13nexthttp://localhost:4200/vendor.js:95368:17_nexthttp://localhost:4200/vendor.js:95312:9nexthttp://localhost:4200/vendor.js:95289:13nexthttp://localhost:4200/vendor.js:95055:17emithttp://localhost:4200/vendor.js:44742:54checkStablehttp://localhost:4200/vendor.js:44987:13onHasTaskhttp://localhost:4200/vendor.js:45031:21hasTaskhttp://localhost:4200/polyfills.js:2763:21_updateTaskCounthttp://localhost:4200/polyfills.js:2783:17_updateTaskCounthttp://localhost:4200/polyfills.js:2607:17runTaskhttp://localhost:4200/polyfills.js:2527:25drainMicroTaskQueuehttp://localhost:4200/polyfills.js:2917:25 QuestionDetailComponent.html:22:3
ERROR CONTEXT
Object { view: {…}, nodeIndex: 27, nodeDef: {…}, elDef: {…}, elView: {…} }
QuestionDetailComponent.html:22:3

Jose Osses Plaza

student•

error no me muestra la lista ni el ngIF que sea el primero en responder
ERROR TypeError: “_co.question.answer is undefined”

ERROR CONTEXT QuestionDetailComponent.html:22:3
Object { view: {…}, nodeIndex: 27, nodeDef: {…}, elDef: {…}, elView: {…} }

ayuda porfa se me ocultaron todas las preguntas solo esta el nombre el tituo y el boton de respuestas sin enviar nada… desde ya gracias
quien me puede ayudar desde ya gracias ??? estoy usando la version actual de angular y material igual la clase mat en vez de mad … Gracias

Jose Osses Plaza

student•

coomo se depuran los erroes desde visual code porque no me aparecen bien en el navegador … gracias si alguien me comenta … Gracias

Diego Forero

Team Platzi•

Puedes poner un debugger; en tu código y se detendrá la ejecución y puedes en las devtools revisar lo que tiene guardado las diferentes variables en ese punto de ejecución.

Jose Osses Plaza

student•

   <ul class='answerlist' *ngIf="question.answer.lenght > 0" >```  al colocar esa sentencia no esta correcta donde puedo investigar como es el formato de angular en la actualidad gracias

Diego Forero

Team Platzi•

Aquí encuentras la documentación oficial sobre ngIf

Adrian Camilo Caminos

student•

podrias hacerlo asi

<ul class="answer-list" *ngIf="question.answer?.length > 0">

Digo Valencia

student•

este error a que se debe en angular5

QuestionDetailComponent.html:20 ERROR TypeError: Cannot read property 'lenght' of undefined
    at Object.eval [as updateDirectives] (QuestionDetailCom```

Sebastián Torrealba

student•

Me pasa totalmente lo mismo, no sé que podria ser

Quimey Lucas Marquez

student•

Quizá ya lo resolviste, pero es porque le estas pidiendo el largo “lenght” a algo que no esta definido, habría que ver el código con un poco mas de detalle

<ul class="answers-list" *ngIf="question.answers?.length > 0; then thenBlock else elseBlock">
        <ng-template #thenBlock>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
        <li>
            <h5>nicolomas
                <small>Hace unos segundos</small>
            </h5>
            <p class="description">
                amigo, yo se como resolverlo!
            </p>
        </li>
    </ng-template>
    </ul>
    <ng-template #elseBlock>Sé el primero en responder la pregunta!</ng-template> ```

<div class="answers">
    <h3>Respuestas</h3>
    <ul *ngIf="question.answers.length !== 0; else noAnswer" class="answers-list">
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
        <li class="answers-item">
            <h5 class="answers-item-title">
                Paula Becerra
                <small class="answers-item-date">Hace una hora</small>
            </h5>
            <p class="answers-item-text">¡Yo tengo la respuesta!</p>
        </li>
    </ul>
    <ng-template #noAnswer>
        <p>Sé el primero en responder esta pregunta.</p>
    </ng-template>
    <app-answer-form></app-answer-form>
</div>```

<p *ngIf="quesiton.answers.length ===0">Sé el primero en responder</p>```

practicante se quita todo lo que aparecía. y me aparece este error:

ERROR TypeError: Cannot read property 'answers' of undefined
    at Object.eval [as updateDirectives] (QuestionDetailComponent.html:48)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14689)
    at checkAndUpdateView (core.js:13836)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callWithDebugContext (core.js:15090)

Dando estilo al formulario de preguntas

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

Cómo mostrar las respuestas en el listado

Empezando la pantalla de signin

Creando el formulario de signin

Dando estilo al formulario de signin

Creando la pantalla para el listado de preguntas

Creando el componente para los listados de preguntas

Crear la pantalla para cargar una nueva pregunta

Crear formulario de carga de nueva pregunta

Agregando iconos al formulario de preguntas

Agregando un icono genérico al formulario de preguntas

Seleccionando un icono para la pregunta

Conectando nuestras pantallas con el router de Angular

Conectando la pantalla de registro con la de login

Conectando el listado de preguntas con la pantalla del detalle

Conectando el listado de preguntas con el formulario de creación

El Backend de PlatziOverflow

Introducción a Node.js y Express

Express

Instalación y configuración del entorno de desarrollo de Backend con Babel

Instalación y primeros pasos con Express

Creando un endpoint en la API para servir preguntas al cliente

Creando el servicio de preguntas

Completando el servicio de preguntas

Conectando el Frontend de preguntas con nuestro Backend

Agregando un spinner para la carga de preguntas

Obteniendo el detalle de una pregunta desde el Backend

DESAFIO: Contruye el spinner del detalle de la pregunta

Agregando una ruta para crear una pregunta en el Backend

Agregando el método para crear preguntas en el QuestionService

Enviando una pregunta hacia el Backend

Agregando una ruta para crear una respuesta en el Backend

Agregando el método para crear respuestas en el QuestionService

Enviando una respuesta hacia el Backend

Creando la ruta de signin en el Backend

Creando un JSON web token para el usuario autenticado

Escribiendo nuestro servicio de autenticación

Conectando el signin con el Backend

Agregando el logout de usuarios a PlatziOverflow

Creando la ruta de signup en el backend

Conectando el signup de usuarios con el Backend

Qué son y Cómo funcionan los Middlewares

Organizando los middlewares del Backend

Autorizando usuarios para que puedan crear preguntas

Manejar el error del signin

La Base de Datos de PlatziOverflow

Creando el modelo de respuesta

Creando el modelo de usuario

Creando el modelo de pregunta

Estableciendo la conexión con la base de datos

Obteniendo todas las preguntas de la base de datos

Obteniendo una pregunta de la base de datos

Conectando el signup con la base de datos

Encriptando la contraseña del usuario

Conectando el signin con la base de datos

Guardando una pregunta en la base de datos

Guardando una respuesta en la base de datos

Ordenando las preguntas en la home

Despliegue a producción

¿Cómo vamos a hacer el deploy?

Configurando nuestra app para el entorno productivo

Creando el build para producción de nuestro Frontend

Creando el build para producción de nuestro Backend

Cómo enfrentar un proyecto MEAN de aquí en más