• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

299
Views
Diferencia entre dar el método de identificación dinámica en Angular2

Mi pregunta es cuál es la diferencia entre estos tres métodos:

  • [id]="item.id"
  • [attr.id]="item.id
  • id={{item.id}}

¿Qué método es el mejor?

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Tanto [id]="item.id" como id="{{item.id}}" generarán el mismo resultado, ya que ambas son formas de vincular una variable a la plantilla. [] está usando la sintaxis vinculante y la iterpolación { {}}. Ambos usos están bien hasta donde yo sé y depende de su preferencia.

Por otro lado, [attr.id]="id" podría darte un resultado diferente. Esto pondrá el valor de la identificación de la variable en la identificación del atributo del html. por ejemplo: si la variable id=1234.

 <div [attr.id]="id"></div> => <div id="1234"></div>

Pero si tiene un componente con una entrada llamada "id" como:

 import { Component, Input } from '@angular/core'; @Component({ selector: 'hello-world', template: `<h1>Hello your ID is: {{id}}</h1>`, styles: [`h1 { font-family: Lato; }`], }) export class HelloComponent { @Input() id: string; }

Usar [attr.id] no es lo mismo que usar [id].

  • [id] llenará la variable de entrada del componente llamado "id"
  • [attr.id] definirá el atributo HTML "id"

Espero que esto ayude a resolver tu pregunta.

almost 3 years ago · Juan Pablo Isaza Report

0

Necesitará saber la diferencia entre atributos y propiedades.

El primero esel enlace de propiedades , que se usa comúnmente para enlazar propiedades HTML dinámicas. Su caso de uso correcto es ese primer ejemplo [id]="item.id" , en el que la propiedad HTML es ID

La tercera es la interpolación de texto , comúnmente utilizada para "incorporar valores de cadena dinámicos en sus plantillas HTML". El caso de uso correcto debería ser <p>Audi has sold {{totalCarsSold}} cars in 2021</p> , donde totalCarsSold está definido en su componente. Aunque el tercero también funciona, no se recomienda vincular propiedades HTML.

El segundo, sin embargo, es el enlace de atributos . Dado que angular usa enlaces de propiedad, no puede "entender" el rol de ese atributo que se ha vinculado como propiedad. Por lo tanto, el prefijo .attr debe usarse para decirle a angular que ese es un atributo que se está usando. Por ejemplo, en el caso de una barra de progreso dinámica a continuación,

<div style="width: {{progress}}%" [attr.aria-valuenow]="progress"> {{progress}}% </div> dado que aria es un atributo, debe tener el prefijo .attr , o angular arroja un error Can't bind to 'aria-valuenow' since it isn't a known property of 'div'

Asegúrese de consultar los enlaces anteriores para ver casos de uso detallados, o esta respuesta en stackoverflow en el mismo

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error