Início / coding / Perguntas / 79492812
Accepted
user1169587
Asked: 2025-03-07 23:46:07 +0800 CST

Angular, [(ngModel)]="abc", não se sabe como funciona a parte (ngModel)="abc"

  • 772

No Angular, [(ngModel)]="abc"eu sei que isso significa ligação bidirecional, alterar o valor abc no modelo (ts) refletirá na visualização (html), alterar o valor da visualização atualizará o valor no modelo, conforme testado no caso 5 no exemplo a seguir. Eu também sei [ngModel]="abc"que significa que se o valor do modelo "abc" for alterado, a visualização será atualizada de acordo, conforme testado no caso 1 no exemplo a seguir.

  1. Mas não sei [(ngModel)]="abc"como a alteração de visualização (html) atualiza o valor do modelo (ts)?

Eu vi a pergunta

[https://stackoverflow.com/questions/46120731/angular-ngmodel-vs-ngmodel-vs-ngmodel][1]

ele menciona

[(ngModel)]="expression"

é desembrulhado pelo compilador em

[ngModel]="expression" (ngModelChange)="expression=$event"

no meu caso, a expressão é "abc", então tento simular nos casos 2,3,4 (especialmente no caso 3), mas nem todos conseguem refletir a mudança da visualização para o modelo.

o código de teste é o seguinte:
test-binding1.component.ts

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

@Component({
  selector: 'app-test-binding1',
  templateUrl: './test-binding1.component.html',
  styleUrls: ['./test-binding1.component.css']
})
export class TestBinding1Component implements OnInit {

  constructor() { }
  abc:string = "2";

  ngOnInit() {
  }

}

teste-binding1.component.html

<p>case 1: Input with [ngModel]:<input type="text" [ngModel]="abc"/></p>
<p>case 2: Input with (ngModel):<input type="text" (ngModel)="abc"/></p>
<p>case 3:Input with (ngModelChange)="expression=$event":<input type="text" 
    (ngModelChange)="abc=$event"/></p>
<p>case 4:Input with (ngModelChange)="$event":<input type="text" 
        (ngModelChange)="$event"/></p>
<p>case 5:Input with [(ngModel)]:<input type="text" [(ngModel)]="abc"/></p>
<p>case 6:{{abc}}</p>

ao visitar o test-binding1.component.html, os casos 1, 5, 6 mostram 2 inicialmente, os casos 2,3,4 mostram em branco.
Se eu atualizar o valor da caixa de texto no caso 5, o valor da caixa de texto no caso 1, 6 muda de acordo, o valor da caixa de texto no caso 2,3,4 não tem efeito.
Se atualizar o valor na caixa de texto caso 1,2,3,4, nenhuma mudança em outro valor da caixa de texto.

angular

1 respostas

  1. Best Answer

    Abaixo está o seletor parangModel

    ngModel.ts - código fonte

    @Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel',
  standalone: false,
})
export class NgModel extends NgControl implements OnChanges, OnDestroy {

    Como você pode ver, ngModelsomente o must be present (ngModelChange)funcionará.

    Não (ngModel)funcionará, pois primeiro não corresponde ao seletor (eu acho).

    <p>case 2: Input with (ngModel):<input type="text" (ngModel)="abc"/></p>

    Código completo:

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <p>case 1: Input with [ngModel]:<input type="text" [ngModel]="abc"/></p>
    <p>case 2: Input with (ngModel):<input type="text" (ngModel)="abc"/></p>
    <p>case 3:Input with (ngModelChange)="expression=$event":<input type="text" [ngModel]="abc"
        (ngModelChange)="abc=$event"/></p>
    <p>case 4:Input with (ngModelChange)="$event":<input type="text" [ngModel]="abc"
            (ngModelChange)="$event"/></p>
    <p>case 5:Input with [(ngModel)]:<input type="text" [(ngModel)]="abc"/></p>
    <p>case 6:{{abc}}</p>
  `,
})
export class App {
  abc: string = '2';
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    • 1

relate perguntas