Angular's Material2 Md-Select Menu Items Are Invisible to User

[darrenbrett]

My dev environment: @angular/cli: 1.0.0-rc.1 node: 7.4.0 os: darwin x64

I am using Material2 components throughout my Angular 2 app, and they're working as expected. However, on a new component I am using a Basic select menu, and, while it's working, the text of the items in the drop-menu are not visible. They are there - in terms of selectable data items - because I can select them, but the values themselves aren't actually visible in the view. This is what I have in my component view code:

<div class="contact-type-menu">
    <form>
        <md-select placeholder="Contact Type">
        <md-option *ngFor="let type of types" [value]="type.value">
            {{ type.value }}
        </md-option>
        </md-select>
    </form>
</div>

And this is what I have in the component:

types = [
    {value: 'Mother'},
    {value: 'Father'},
    {value: 'Guardian'},
    {value: 'Relative'},
    {value: 'Other'},
];

The only class I'm applying is for the containing div, and the css for that looks like this:

.contact-type-menu {
  margin-top: 40px;
}

[jefersonestevo]

Dude, the problem here is that the property that you're trying to show on your md-option does not exists in your list: {{ type.viewValue }}

Try to change it to {{ type.value }} (which is a property that exists on your types list) and you'll see them rendered.

Example: Plunker

[darrenbrett]

You'd think that'd work, but after changing it, I still don't see the values. It looks like it's iterating over the list, but it is not visible, just like before:

    <div class="contact-type-menu">
        <form>
            <md-select placeholder="Contact Type" [(ngModel)]="selectedValue" name="type">
            <md-option *ngFor="let type of types" [value]="type.value">
                {{ type.value }}
            </md-option>
            </md-select>
            <p> Selected value: {{selectedValue}} </p>
        </form>
    </div>

[darrenbrett]

Played with it some more and got it to work. Thanks @jefersonestevo.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}