主页 / coding / 问题 / 79492812
Accepted
user1169587
Asked: 2025-03-07 23:46:07 +0800 CST

Angular，[(ngModel)]="abc"，未知 (ngModel)="abc" 部分如何工作

  • 772

在 Angular 中[(ngModel)]="abc"，我知道这意味着双向绑定，更改模型 (ts) 中的值 abc 将反映在视图 (html) 中，更改视图值将更新模型中的值，如下例中的情况 5 所示。我还知道[ngModel]="abc"这意味着如果模型“abc”值发生变化，视图将相应更新，如下例中的情况 1 所示。

  1. 但我不知道[(ngModel)]="abc"视图的变化（html）如何更新模型（ts）的值？

我已经看到了这个问题

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

它提到

[(ngModel)]="expression"

被编译器解包为

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

在我的情况下，表达式是“abc”，因此我尝试在情况 2、3、4（尤其是情况 3）中进行模拟，但都无法反映从视图到模型的变化。

测试代码如下：
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() {
  }

}

测试绑定1.组件.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>

当访问 test-binding1.component.html 时，情况 1、5、6 最初显示 2，情况 2、3、4 显示空白。
如果我更新情况 5 中的文本框值，情况 1、6 中的文本框值会随之更改，情况 2、3、4 中的文本框值则没有效果。
如果更新文本框情况 1、2、3、4 中的值，其他文本框值不会发生任何变化。

angular

1 个回答

  1. Best Answer

    以下是选择器ngModel

    ngModel.ts-源代码

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

    正如你所见，ngModel必须存在才会(ngModelChange)起作用。

    这(ngModel)将不起作用，因为它首先与选择器不匹配（我认为）。

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

    完整代码：

    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);

    Stackblitz 演示

    • 1

相关问题