Angular 7中如何修改ngui-auto-complete的无匹配下拉自定义提示？

在Angular 7项目中使用ngui-auto-complete组件时，默认无匹配结果会显示“No Result Found”，想要替换成“Not found, do you want to add one?”，但尝试用[NoMatchFound]属性设置未生效，当前代码如下：

<div class="row">
  <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
      <div class="floating-label" ngui-auto-complete [source]="activeSkills"
        value-formatter="name" list-formatter="name"
        [match-formatted]="true" [auto-select-first-item]="true"
        (ngModelChange)="myCallback('skill',$event)" [re-focus-after-select]="false">
        <input [(ngModel)]="skillObjName" id="skillMem" class="floating-input" placeholder=" "
            autocomplete="off" name="skillMem">
        <label for="skillMem" class="formLabel">Tag the skills</label>
      </div>
      <div class="error" *ngIf="f.submitted && (!skillName || skillName.length == 0)">
        {{constants.skillTagging}}
      </div>
    </div>
  </div>
</div> 

解决方案 #

1. 修正属性绑定名称

ngui-auto-complete的无匹配提示输入属性是noMatchFound（小驼峰命名），模板中需使用[noMatchFound]进行绑定，而非大写的[NoMatchFound]。直接在组件标签上添加该属性并设置自定义文本即可：

修改后的组件标签代码：

<div class="floating-label" ngui-auto-complete [source]="activeSkills"
  value-formatter="name" list-formatter="name"
  [match-formatted]="true" [auto-select-first-item]="true"
  (ngModelChange)="myCallback('skill',$event)" [re-focus-after-select]="false"
  [noMatchFound]="'Not found, do you want to add one?'">

2. 自定义带交互的提示模板（可选）

如果需要给提示添加交互功能（比如点击添加新技能），可以使用组件的noMatchTemplate属性自定义模板：

首先在模板中定义自定义提示模板：

<ng-template #noMatchTemplate>
  <p>Not found, do you want to add one?</p>
  <button class="add-btn" (click)="addNewSkill(skillObjName)">Add Skill</button>
</ng-template>

然后将模板绑定到ngui-auto-complete组件：

<div class="floating-label" ngui-auto-complete [source]="activeSkills"
  value-formatter="name" list-formatter="name"
  [match-formatted]="true" [auto-select-first-item]="true"
  (ngModelChange)="myCallback('skill',$event)" [re-focus-after-select]="false"
  [noMatchTemplate]="noMatchTemplate">

最后在组件类中实现addNewSkill方法：

addNewSkill(skillName: string): void {
  // 这里添加新增技能的逻辑，比如将skillName加入activeSkills数组
  this.activeSkills.push({ name: skillName });
  // 其他业务逻辑...
}

内容的提问来源于stack exchange，提问作者Anish