我需要清除Angular中的结果数据

Question

在这里，我在点击扫描按钮后，在输入字段下方显示结果。现在我需要在清除domainUrl(在输入字段中(时清除结果。

app.component.html：

<div class="d-flex justify-content-center align-items-center vh-100">
<div class="row col-md-4">
<div class="d-flex justify-content-center mt-n5">
<a href="https://logo.ai/" target="_blank"><img 
src="./assets/image/logo.png"></a>
</div>
<div class="input-group d-flex align-items-baseline">
<p class="col-12 mb-0 pb-2">loreum ipsum....<a 
href="link" target="_blank">loreum</a> ipsum</p>
<input type="url" class="form-control pt-1" id="validationCustomUsername" placeholder="Enter your Target Url"
[(ngModel)]="domainUrl"  aria-describedby="inputGroupPrepend" (change)="inputChanged=true" >
<div class="input-group-prepend m-0">
<button type="submit" class="btn btn-primary " (click)="scanDomain()"
[disabled]="(isLoading || ((!domainUrl || !domainUrl.length) && 
!inputChanged) || (isLoading && !inputChanged)) ">{{submitBtntext}}
<i *ngIf="isLoading"  class="fa fa-spinner fa-pulse fa-x"></i>
</button>
</div>
</div>
<span *ngIf="this.result" class="pt-2 mt-2">{{ this.result.result}}</span>
</div>
</div>

谢谢。

Answer 1

您可以引入一个新的onChange方法，该方法在keyup事件上调用，并在this.domainUrl为empty或null时清除this.result变量。

您的标记将如下所示：

<input type="url" class="form-control pt-1" id="validationCustomUsername" placeholder="Enter your Target Url"
[(ngModel)]="domainUrl"  aria-describedby="inputGroupPrepend" (change)="onChange()" (keyup)="onChange()" >

字体添加：

onChange(): void {
this.inputChanged = true;
if (!this.domainUrl) {
this.result = {};
}
}

工作示例：https://stackblitz.com/edit/angular-ivy-v2qsr5?file=src%2Fapp%2Fapp.component.ts