循环中的Angular2材质设计下拉列表

我在一个数组（serviceOptions）中循环，每个选项都有一个下拉列表。下降是自动完成的。当我在任何下拉列表中选择某个选项时，它将显示在所有下拉列表的中。此问题是由于[mdAutocomplete]=“package”引起的。我需要在中的#package=“mdAutocomplete”将这里的“package”更改为动态的，类似于wise。 有什么帮助吗

<label *ngFor="let service of serviceOptions">
    {{service.serviceName}}
    <br/>
    <md-input-container class="autoCompolete">
      <input mdInput placeholder="Select Package" [mdAutocomplete]="package" [formControl]="packageCtrl" formControlName="packageName" [(ngModel)]="currentpackage" size="30">
    </md-input-container>
    <md-autocomplete #package="mdAutocomplete" [displayWith]="displayPackage">
        <md-option (onSelectionChange)="packageSelection($event, package)" [value]="package" *ngFor="let package of (reactivePackages | async)">
          {{ package.packageName }}
          {{package.serviceId}}
          {{service.serviceId}}
        </md-option>
    </md-autocomplete>
    <br />
  </label>

{{service.serviceName}


{{package.packageName}
{{package.serviceId}
{{service.serviceId}

我不认为使用相同的自动完成是这里的问题。我创建这个示例是为了确认您实际上可以在

ngFor

循环之外执行autocomplete。我认为问题在于所有的

输入

字段都具有相同的

formControl

和

ngModel

。正因为如此，当您选择其中任何一个时，它们都会被设置为绑定到同一个

[（ngModel）]=“currentpackage”

@Nehal您认为有什么解决方案可以解决这个问题吗？我一开始无法提供解决方案，因为我不知道

serviceOptions

看起来是什么样子，或者使用“自动完成”尝试设置的值。如果你能提供这些，并解释一下你试图更新的值，那么我也许能找到一个解决方案。我不认为使用相同的自动完成是这里的问题。我创建这个示例是为了确认您实际上可以在

ngFor

循环之外执行autocomplete。我认为问题在于所有的

输入

字段都具有相同的

formControl

和

ngModel

。正因为如此，当您选择其中任何一个时，它们都会被设置为绑定到同一个

[（ngModel）]=“currentpackage”

@Nehal您认为有什么解决方案可以解决这个问题吗？我一开始无法提供解决方案，因为我不知道

serviceOptions

看起来是什么样子，或者使用“自动完成”尝试设置的值。如果您能够提供这些信息，并解释您试图更新的值，那么我可能能够找到一个解决方案。