Html 如何在“角度”对话框中从下拉列表中进行选择

我有一个下拉列表，显示所有用户过去创建的现有标签/芯片，但我不确定为什么当我从下拉列表中选择一个时，该项目没有显示在我的输入字段中（就像现在的图表标签一样）。我可以通过输入文本并按enter键来创建芯片/标签，但我也希望用户可以从下拉列表中选择由某人创建的标签

图表标记是我通过输入创建的示例（未从列表中选择）

如果有人能给我建议或帮助我，我将不胜感激

TS

HTML

{{chip.tag}
取消
{{tag}}

首先，看起来您在同一输入中同时使用了反应式表单和模板驱动表单。如果不是要求，我会考虑删除和离开这种方式（反应形式）：

（如果更改，则需要重构component.ts）

但回答你的问题：

在所选功能上，您没有将标签添加到芯片阵列，并且芯片阵列是用于显示标签的阵列，因此您需要更改为：

selected(event: MatAutocompleteSelectedEvent) : void {
    const tag = {tag: event.option.viewValue, type: TagType.user};
    this.normalTags.push(tag);
    this.chips.push(tag); <---- new line
    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl2.setValue(null);
    var index = this.allTagNames.indexOf(tag.tag);
    this.allTagNames.splice(index, 1);
    this.mapper();
  }

选中（事件：MatAutocompleteSelectedEvent）：无效{
const tag={tag:event.option.viewValue，type:TagType.user}；
this.normalTags.push（标签）；
这个.芯片.推（标签）；你能提供将标签添加到HTML中的代码吗？和函数映射器？@BrenoAntunes嗨..我只是在上面添加了更多代码，而且我还将整个代码上传到stackblitz这里。请让我知道..谢谢你提供我这个，但你能帮我解决这个问题吗..自从我离开后，我已经被困了两天了好的，我的同事完成了这项任务并完成了丢失。帮你解决什么问题？我用你需要添加的行更新了我的答案，让我知道它是否解决了问题。你能帮我找到refector component.ts文件吗？我只是添加了这些代码，现在在选择时显示出来，但它没有实际存储。当我参考浏览器时，芯片就消失了。以及此外，我无法通过输入来创建新芯片。如果您能帮助我，我将不胜感激。请不要保存数据，因为它只是存储在一个数组中。我无法访问您的所有项目，但您有一个服务来添加标记，您需要通过新标记调用此服务。我不知道哪个组件是rec从“tagAdded.emit”接收事件，但它可能正在从那里调用服务。如果它没有调用服务，则需要从组件调用。
    <mat-form-field class="demo-chip-list" appearance="fill">
        <mat-chip-list #chipList>
            <mat-chip  *ngFor="let chip of chips" [selectable]="selectable" [removable]="removable" (removed)="removeTags(chip)">
                {{chip.tag}}
                <mat-icon matChipRemove *ngIf="chip.pending !== true && removable" matTooltip="Remove a tag">cancel</mat-icon>
                <mat-spinner *ngIf="chip.pending === true" [diameter]="16" mode="indeterminate"></mat-spinner>
            </mat-chip>

            <input matInput  #input [(ngModel)]="tagIn" placeholder="Select or Create a tag" [formControl]="tagCtrl2" [matAutocomplete]="auto"
                (focusout)="hideTagInput()" (keyup.enter)="addTag()"(keyup.escape)="hideTagInput()"
                (keydown.backspace)="$event.stopPropagation();" (keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />
        </mat-chip-list>

        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
                {{tag}}
            </mat-option>
        </mat-autocomplete>

    </mat-form-field>


<input matInput placeholder="Select or Create a tag" [formControl]="tagCtrl2" 
[matAutocomplete]="auto" (focusout)="hideTagInput()" (keyup.enter)="addTag()"
(keyup.escape)="hideTagInput()" (keydown.backspace)="$event.stopPropagation();" 
(keydown.space)="$event.stopPropagation();" [matChipInputFor]="chipList" />

selected(event: MatAutocompleteSelectedEvent) : void {
    const tag = {tag: event.option.viewValue, type: TagType.user};
    this.normalTags.push(tag);
    this.chips.push(tag); <---- new line
    if(this.input){
      this.input.nativeElement.value = "";
    }
    this.tagCtrl2.setValue(null);
    var index = this.allTagNames.indexOf(tag.tag);
    this.allTagNames.splice(index, 1);
    this.mapper();
  }