如何在Angular 2材质2中更改md自动完成宽度？

我一直在努力使md autocomplete的宽度增长到相关mdInput的大小。 这是我的密码：

<div class="field">
        <md-input-container class="halfWidth">
            <input mdInput 
            type="text" 
            name="country" 
            [(ngModel)]="model.Country" 
            (ngModelChange)="filterCountries()" 
            [disabled]="progress" 
            [mdAutocomplete]="countriesAutocomplete" 
            placeholder="Country" 
            required />
        </md-input-container>
        <md-autocomplete #countriesAutocomplete="mdAutocomplete" 
            [displayWith]="getCountryName">
            <md-option *ngFor="let country of countries" 
                    [value]="country" 
                    class="fullWidth">
                {{ country.PersianName || country.EnglishName }}
            </md-option>
        </md-autocomplete>
    </div>

{{country.PersianName | country.EnglishName}

下面是结果图：

---

我使用了

md autocomplete

和

md autocomplete.mat autocomplete面板

CSS选择器，但没有结果。

我想我找到了答案。。我想提醒大家，这是一个试验错误，我还没有检查这一结果。请小心使用。 这是对我有用的东西。。 我在全局CSS文件中将class.cdk覆盖窗格的max-width属性设置为“none”，width属性设置为“auto”，这似乎解决了我的问题。希望对你有帮助。。。干杯快乐编码…：）

---

那不行。我试过编辑所有的CSS。我认为他们正在阻止它，因为它还在测试阶段

---

我不知道怎么做（

尝试此操作。如果希望组件样式级联到组件的所有子元素，但不级联到页面上的任何其他元素，请执行以下操作：

 :host ::ng-deep .mat-autocomplete-panel{
        width:fit-content;
        }

根据我对类似问题的回答，您现在可以使用新属性

@Input()
panelWidth: string | number

指定自动完成面板的宽度。可以是任何CSS大小 值，否则它将与其主机的宽度匹配

---

为我工作。但是，我必须在global styles.css中插入这个。它在组件css中不起作用，因为Angular没有在覆盖窗格中标记组件的名称。这很遗憾，因为它不能局限于实际需要它的组件。

@Input()
panelWidth: string | number