angular / angular/components

Feature: Possibility to make the [displayWith] of Autocomplete more flexible

Offen
#4,863 31 Kommentare 43 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete feature needs: discussion P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:
Feature Request.

#### What is the expected behavior?
I expect `[displayWith]` to give me back the whole `object` so I can treat what property I can return to `display` (doesn't it make sense)?

#### What is the current behavior?
Actually `[displayWith]` is too limited.

Ex:

I have the following variable that gets the content from API:

```
this.myObs = this..();
```

That's the content coming from back-end:

```
[
{ id: 1, name: 'anyName' },
{ id: 2, name: 'xxx' }
];
```

In template I have:

```


{{ obj.name }}

```
Since, I'm binding the md-option to `id`, `[displayWith]` just gives me the value of `id` while I was expecting at least the `full object` so I can return the `name`, for example.

**Workarounds:**

1- Subscribe to the observables and store in arrays.

**Problem 1:** You'll have to loop through the array **everytime** that an option is selected to return the desired property.

**Problem 2:** Imagine that I have more than 10 autocomplete (my case), I'll have to create 10 variables and subscribe them all while I could simply use the `async` pipe (as I'm doing) and, consequently I wouldn't need to subscribe in nothing.

2 - Bind the full object to ``, so `[displayWith]` will give me back the whole object.

**Problem:** If your API expects a single property (in my case back-end expects only the id), before submits the form, you'll have to change **the whole** content of form that was stored as object to id.

#### What are the steps to reproduce?

Providing a Plunker (or similar) is the *best* way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

#### What is the use-case or motivation for changing an existing behavior?
-

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 2.0.0-beta.6

#### Is there anything else we should know?
The workarounds can be used? Ofc they can, however it'd be really better if Material2 could provide a better solution for this.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das Verhalten der Angular Material-Autovervollständigung rund um displayWith und md-option-Werte zu überprüfen. Reproduziere das Beispiel mit einer asynchronen Optionsliste, einer Option mit ID-Wert und einer Anzeigefunktion. Erledigt ist die Aufgabe, wenn das angeforderte objektbasierte Anzeigeverhalten definiert und verifiziert ist, ohne manuelle Subscriptions zu erfordern oder den Formularwert vor dem Absenden zu ersetzen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
28/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.