Как настроить заполнители в строке, которая может быть заменена интерполированными значениями после их выбора из раскрывающегося списка?

Question

Поэтому я пытаюсь использовать привязку в Angular2, чтобы, когда кто-то выбирает имя из раскрывающегося меню в верхней части моего веб-приложения, это имя заменяет определенные заполнители по всей форме, поэтому в нем отображается имя человека, а не "этот человек" или " твой товарищ по команде ". Я не только хочу, чтобы значение name объекта подставлялось в эти заполнители, но я также хочу, чтобы значение электронной почты также извлекалось, чтобы я мог вызывать его из почтовой службы, когда нажимаю submit для отправки электронного письма.

Мне удалось заставить привязку работать, поэтому в тот момент, когда я выбираю имя, оно вставляет его в текст, но у меня возникают проблемы с выяснением того, как сделать заполнители, которые можно заменить на выбранное имя. Кроме того, как я могу получить 2 значения (имя и адрес электронной почты) из одной модели нг?

выдержка из моего кода:

<div id="toggle" class="row">>
        <div class="dropdown">
            <div class='col-md-6 col-md-offset-5'>
                <select [(ngModel)]="selectedTeammate.name">
                    <option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
                </select>
            </div>
        </div>
    </div>  s

    <form>
        <div id="questions">
            <div id="question1" class="row"> 
                <div id="questionbox" class='col-md-10 col-md-offset-1'> 
                    <p>{{question1a}} {{ selectedTeammate.name }} {{question1b}} {{ selectedTeammate.name }} {{question1c}}</p>
                </div>
                <div id="textbox" class='col-md-6 col-md-offset-3'>
                    <textarea id="styled"  placeholder="Why or why not?"></textarea>
                </div>
            </div>

            <div id="question2" class="row">
                <div id="questionbox" class='col-md-10 col-md-offset-1'>        
                    <p>{{question2a}} {{selectedTeammate.name }} {{question2b}}</p>
                </div>
                <div id="textbox" class='col-md-6 col-md-offset-3'>
                    <textarea id="styled" onfocus="this.value=''; setbg('#e5fff3');" placeholder="Please provide a brief explanation"></textarea>
                </div>   
            </div>

На что это похоже:

Выбранное имя вставляется в строку, но мне нужен заполнитель, чтобы заполнить пробел в предложении, пока имя не выбрано

Если кто-то может помочь мне с моим выпадающим меню, то это было бы просто фантастически! Я попытался загрузить свой выпадающий список, чтобы сделать его красивее, и даже скопировал код с веб-сайта начальной загрузки, чтобы проверить его, но в раскрывающемся списке не отображаются какие-либо параметры при нажатии. Вот код, который я использую для этого.

<div class="dropdown row">
    <div id="dropdown column" col-md-3 col-md-offset-3 style="margin: 0 auto; text-align: center;">
        <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" >Select a teammate youve worked with!
        <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
    </div>
</div>    

Раскрывающийся список отображается правильно, но при нажатии ничего не происходит, и я не вижу ни одного из объектов списка. Мне нужно, чтобы это работало с ngFor точно так же, как и описанный выше выпадающий список.

У меня также возникают проблемы при попытке настроить значок сайта.

Я включил это в мой индексный файл:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 

и вот путь к файлу моего изображения favicon:

C: \ Users \ user1 \ Desktop \ Projects \ ДСН-приложение \ SRC \ приложение \ \ активы Pictures\favicon.ico

Я знаю, что это много и, возможно, не отформатировано наилучшим образом, но дайте мне знать, если вам нужна дополнительная информация. Если вы можете помочь мне с любым из этих вопросов, я буду очень признателен!

Спасибо!

Answer 1

В опции выбора при загрузке вы можете показать опцию показа по умолчанию как Выбор, поэтому вам нужно добавить еще одну строку в качестве опции.

<select [(ngModel)]="selectedTeammate.name">
<option value="">Select</option>
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
                </select>

Так что код будет выглядеть так.

Answer 2

С помощью ngValue Вы можете вытащить весь объект из вашего [(ngModel), Чтобы установить "заполнитель" для вашего объекта, чтобы у вас было какое-то значение в вашем представлении, пока он не будет заменен выбранным вами товарищем по команде, вы можете инициализировать selectedTeammate с некоторыми значениями, например:

selectedTeammate: Object = {id: null, name: 'your teammate', e-mail: ''};

И, как уже упоминалось, использовать ngValue связать весь объект, и изменить ngModel быть например selectedTeammate как я использовал в этих примерах.

<select [(ngModel)]="selectedTeammate">
    <option *ngFor="let teammate of teammates" [ngValue]="teammate">{{teammate.name}}</option>
</select>

Теперь, когда вы выбрали партнера по команде, selectedTeammate состоит из всего объекта, а не только имени. Оттуда вы можете получить электронную почту, связанную с этим товарищем по команде.

Надеюсь это поможет!:)

Демо плункер