(change) so với (ngModelChange) ở dạng góc

360
Ramesh Rajendran 2017-06-30 21:16.

Angular 1 không chấp nhận onchange()sự kiện, nó chỉ chấp nhận ng-change()sự kiện.

Mặt khác, Angular 2 chấp nhận cả hai (change)(ngModelChange)các sự kiện, cả hai dường như đang làm cùng một điều.

Có gì khác biệt?

cái nào là tốt nhất cho hiệu suất?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

so với thay đổi :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

5 answers

542
omeralper 2017-07-13 22:16.

(change) sự kiện ràng buộc với sự kiện thay đổi đầu vào cổ điển.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Bạn có thể sử dụng (thay đổi) sự kiện ngay cả khi bạn không có mô hình ở đầu vào của mình như

<input (change)="somethingChanged()">

(ngModelChange)@Outputchỉ thị của ngModel. Nó kích hoạt khi mô hình thay đổi. Bạn không thể sử dụng sự kiện này mà không có lệnh ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Khi bạn khám phá nhiều hơn trong mã nguồn, (ngModelChange)sẽ tạo ra giá trị mới.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Vì vậy, nó có nghĩa là bạn có khả năng sử dụng như vậy:

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value
}

Về cơ bản, có vẻ như không có sự khác biệt lớn giữa hai, nhưng ngModelcác sự kiện sẽ tăng sức mạnh khi bạn sử dụng [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>
dataChanged(newObj) {
    // here comes the object as parameter
}

giả sử bạn thử điều tương tự mà không có " ngModelthứ"

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>
changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}
101
CAK2 2018-12-27 14:30.

Trong Angular 7, (ngModelChange)="eventHandler()"sẽ kích hoạt trước khi giá trị liên kết với [(ngModel)]="value"được thay đổi trong khi (change)="eventHandler()"sẽ kích hoạt sau khi giá trị liên kết với [(ngModel)]="value"được thay đổi.

23
Disaster 2019-07-26 01:00.

Như tôi đã tìm thấy và viết trong Angular 2 ngModelThay đổi giá trị cũ chủ đề Angular 2 ngModelThay đổi giá trị cũ - điều này áp dụng cho góc <7 (không chắc nó như thế nào trong 7+)

Chỉ vì tương lai

chúng ta cần phải quan sát mà [(ngModel)]="hero.name"chỉ là một đoạn ngắn cắt có thể được de-sugared để: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Vì vậy, nếu chúng ta khử đường, chúng ta sẽ kết thúc bằng:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

hoặc là

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Nếu bạn kiểm tra đoạn mã trên, bạn sẽ nhận thấy rằng chúng tôi kết thúc với 2 ngModelChangesự kiện và những sự kiện đó cần được thực hiện theo một số thứ tự.

Tính tổng: Nếu bạn đặt ngModelChangetrước đó ngModel, bạn nhận được $eventgiá trị mới, nhưng đối tượng mô hình của bạn vẫn giữ giá trị trước đó. Nếu bạn đặt nó sau ngModel, mô hình sẽ có giá trị mới.

NGUỒN

4
Julien 2020-02-21 03:46.

1 - (change) liên kết với sự kiện trao đổi HTML. Tài liệu về HTML onchange cho biết như sau:

Thực thi JavaScript khi người dùng thay đổi tùy chọn đã chọn của một <select>phần tử

Nguồn: https://www.w3schools.com/jsref/event_onchange.asp

2 - Như đã nêu trước đây, (ngModelChange)bị ràng buộc với biến mô hình liên kết với đầu vào của bạn.

Vì vậy, cách giải thích của tôi là:

  • (change)kích hoạt khi người dùng thay đổi đầu vào
  • (ngModelChange) kích hoạt khi mô hình thay đổi, cho dù nó có liên tiếp với một hành động của người dùng hay không
0
Harel Levy 2020-10-12 13:10.

Để tăng hiệu suất thực sự của ràng buộc trong góc, tôi thực sự khuyên bạn cũng nên sử dụng changeDetection: ChangeDetectionStrategy.OnPushtrong trình trang trí thành phần của bạn và cập nhật phát hiện thay đổi theo cách thủ công khi cần bằng cách sử dụng detectChangeshoặc markForCheckcác phương pháp từ dịch vụ ChangeDetectionRef.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language