改变：当用户提交对元素值的更改时，将针对 、 和 元素触发 change 事件。对于元素值的每次更改，不一定会触发 change 事件。 change 是一个 DOM 事件，它可以触发 HTML 标签和元素的变化。</p> <ul> <li><strong>句法：</strong> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><input (change)="function($e)"></code></pre> </div> </li> </ul> <ul> <li><strong>例子：</strong><br/> HTML文件： </li> </ul> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><label>Choose your favorite cartoon: <select class="cartoon" name="cartoon"> <option value="">Select One …</option> <option value="Tom and Jerry">Tom and Jerry</option> <option value="Doraemon">Doraemon</option> <option value="Phineas and Ferb">Phineas and Ferb</option> </select> </label> <div class="result"></div> </code></pre> </div> </div> <p>打字稿文件： </p> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">const selectElement = document.querySelector('.cartoon'); selectElement.addEventListener('change', (event) => { const result = document.querySelector('.result'); result.textContent = `You like ${event.target.value}`; }); </code></pre> </div> </div> <ul> <li><strong>输出</strong><br/><img alt="" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_is_the_difference_between_change_and_ngModelChange_in_Angular?_0.jpg"/></li> </ul> <p> <strong>ngModelChange：</strong><br/>当用户想要更改模型时，通过在输入中输入文本，事件回调将触发并将新值设置为模型。我们不能在没有 ngModel 的情况下使用 mgModelChange，因为 ngModel 类具有带有 EventEmitter 实例的更新函数。 ngModelChange 只会在模型更改或更新时触发。</p> <ul> <li><strong>句法</strong></li> </ul> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><input [(ngModel)]="value" (ngModelChange)="function($e)"> </code></pre> </div> <ul> <li><strong>例子</strong><br/>HTML文件： </li> </ul> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><div style="color: red" *ngIf="isInvalid"> Please check your ranges </div> <form (submit)="onSubmit()" id="inputForm" class="form-group" class="row"> <h3>Price Filters</h3> <span>Greater than:</span> <input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" (ngModelChange)="onChange($event)" placeholder="0"> <span>Less than:</span> <input type="number" name="lessThanValue" [(ngModel)]="lessThanValue" (ngModelChange)="onChange($event)"> <input type="submit"> </form> </code></pre> </div> </div> <ul> <li>打字稿文件： </li> </ul> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { public greaterThanValue = 0; public lessThanValue = 1; public isInvalid: boolean = false; public onChange(event: any): void { this.isInvalid = this.greaterThanValue > this.lessThanValue; } } </code></pre> </div> </div> <ul> <li><strong>输出</strong></li> </ul> <p><img alt="" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_is_the_difference_between_change_and_ngModelChange_in_Angular?_1.jpg"/></p> <p><strong>区别：</strong> </p> <figure class="table"> <table> <thead> <tr> <th>change</th> <th>ngModelChange</th> </tr> </thead> <tbody> <tr> <td>change is bound to the HTML onchange event. It is a DOM event.</td> <td>ngModelChange is bound to the model variable binded to your input.</td> </tr> <tr> <td>No such class is required.</td> <td>ngModelChange need ngModel class to function.</td> </tr> <tr> <td>change event bound to classical input change event.</td> <td>ngModelChange It fires when the model changes. You cannot use this event without ngModel directive.</td> </tr> <tr> <td>change triggers when the user changes the input.</td> <td>ngModelChange triggers when the model changes, irrespective of that change is caused by the user or not.</td> </tr> </tbody> </table> </figure> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>