angular / angular/components

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

Ouverte
#4,863 31 commentaires 43 réactions 0 personnes assignées Voir sur GitHub
area: material/autocomplete feature needs: discussion P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par examiner le comportement de l’autocomplétion de Angular Material autour de displayWith et des valeurs de md-option. Reproduisez l’exemple avec une liste d’options asynchrone, une option dont la valeur est un id et une fonction d’affichage. La tâche est terminée lorsque le comportement d’affichage basé sur un objet demandé est défini et vérifié, sans nécessiter d’abonnements manuels ni remplacer la valeur du formulaire avant la soumission.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
28/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.