Mat-autocomplete - 如何访问选定的选项？答案

【问题标题】：Mat-autocomplete - How to access selected option?Mat-autocomplete - 如何访问选定的选项？
【发布时间】：2018-02-04 00:58:29
【问题描述】：

我知道[value] 存储了选定的对象（在我的例子中是优惠）。根据材料文档，optionSelected 发出一个事件。我试过[optionSelected] = "fooFn"，但它不存在。我只想访问 Offer 对象。谢谢！

offer-search.component.html:

  <h5 #offerP>option - autoComplete</h5>
  <mat-form-field id="form-field">
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option.foodItem.name }}
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>

【问题讨论】：

我正在尝试填写多个输入字段，以便每个字段对应于所选的 Offer 对象的属性，但我不知道如何访问该对象

标签： angular

【解决方案1】：

你可以像这样使用它：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'>

WORKING DEMO

【讨论】：

有效！我想我不知道在哪里可以找到.option.value 语法，尽管它是有道理的。我想知道我还能从$events payload 中得到什么其他信息？
@CCSJ 你可以在这里找到 API 信息（特别是 MatAutocompleteSelectedEvent）material.angular.io/components/autocomplete/api
有没有办法可以停止 optionSelected 事件的默认自动完成行为？目前，选择该选项会覆盖输入中的完整文本。我想附加选定的文本，而不是覆盖它。
@RahulMunjal：根据您的要求，看看这个是完美的例子。- Angular Material Chip material.angular.io/components/chips/overview 。请通过这个。

【解决方案2】：

可以通过两种方式完成

使用onSelectionChange 从mat-option 发出MatOptionSelectionChange

<mat-autocomplete #auto="matAutocomplete">
    <mat-option
      *ngFor="let option of options"
      [value]="option"
      (onSelectionChange)="updateMySelection($event)"
    >
      {{ option }}
    </mat-option>
</mat-autocomplete>

使用optionSelected 从mat-autocomplete 发出MatAutocompleteSelectedEvent

<mat-autocomplete 
  #auto="matAutocomplete"
  (optionSelected)="updateMySelection($event)">
    <mat-option
      *ngFor="let option of options"
      [value]="option"
    >
      {{ option }}
    </mat-option>
</mat-autocomplete>

【讨论】：

性能有区别吗？如何判断两者之间选择哪一个？
我不确定，但我似乎除了事件类型不同之外没有太多
选项 1 非常有用，例如，当自动完成不仅仅是一个字符串并且我们需要 etire 模型来填充其他字段时。

【解决方案3】：

 <mat-form-field floatLabel="always">
            <mat-label>UTBMS Activity Codes</mat-label>
            <input type="text" placeholder="Activity Codes"  [(ngModel)]="activityCode"  aria-label="Number" matInput [formControl]="utbmsActivityCodesControl"
              [matAutocomplete]="autoActivityCodes">
            <mat-autocomplete autoActiveFirstOption #autoActivityCodes="matAutocomplete">
              <mat-option *ngFor="let option of utbmsActivityCodes | async" (onSelectionChange)="setBillingActivity(option)"  [value]="option.code">
                {{option.name}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

setBillingActivity(object){
    this.actionData.libraryContent.billingActivityId=object.activityId;
  }

【讨论】：

【解决方案4】：

如果您需要获取整个 OBJECT 并在组件中使用其子值，请使用此解决方案

https://stackoverflow.com/a/69652848/3944285

【讨论】：