드롭 다운에서 해당 값을 선택한 후 보간 값으로 대체 할 수있는 문자열에 자리 표시자를 설정하는 방법은 무엇입니까?

Question

그래서 Angular2에서 바인딩을 사용하여 다른 사람이 내 웹 응용 프로그램의 맨 위에있는 드롭 다운 메뉴에서 이름을 선택하면 이름이 "이 사람"이 아닌 사람의 이름을 표시하도록 양식 전체의 특정 자리 표시자를 바꿉니다. 또는 "귀하의 팀 동료". 개체의 이름 값을 해당 자리 표시 자로 대체 할뿐만 아니라 전자 메일 값을 가져 와서 제출을 눌러 전자 메일을 보내면 메일 링 서비스에서 호출 할 수도 있습니다. .

바인딩을 사용할 수있게되었으므로 이름을 선택하면 텍스트에 삽입되지만 선택한 이름으로 바꿀 수있는 자리 표시자를 만드는 방법을 찾는 데 문제가 있습니다. . 또한 하나의 ng-model에서 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> 

그것이 어떻게 생겼는지 : 사람뿐만 아니라 내 드롭 다운 메뉴를 도와 줄 수 있다면

The selected name is inserted into the string, but I need a placeholder to fill the gap in the sentence until a name is selected

는, 그 절대적으로 환상적 일 것입니다! 부트 스트랩 웹 사이트의 코드를 복사하여 테스트 해 보았지만 드롭 다운에 클릭 할 때 옵션이 표시되지 않습니다. 여기에 내가 사용하고있는 코드가있다.

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

The dropdown displays correctly, but when clicked nothing happens and I don't see any of the list objects. I need this to work with ngFor just like the above dropdown does.

또한 설치에 사이트의 파비콘을 시도하는 문제가 있습니다. 여기

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

내 파비콘 이미지의 파일 경로 :

나는 내 인덱스 파일이이를 포함 시켰습니다

C : \ 사용자 \ 사용자 1 \ 바탕 화면 \ 프로젝트 \ SDS -app \ src \ app \ assets \ 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: Object = {id: null, name: 'your teammate', e-mail: ''}; 

그리고 언급 한 바와 같이

사용 : 당신이보기에 거기에 몇 가지 값을 가질 수 있도록 선택한 팀의 일원으로 대체 될 때까지, 당신은 어떤 값으로 selectedTeammate, 예를 초기화 할 수 있습니다, 당신의 개체에 대한 "자리"를 설정하려면 ngValue을 사용하여 전체 개체를 바인딩하고 ngModel을 예 : selectedTeammate으로 변경하십시오.

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

이제 팀 동료, 전체 개체의 selectedTeammate consits뿐만 아니라 이름을 선택한 경우. 거기에서 그 팀원과 관련된 전자 메일을 가져올 수 있습니다.

희망이 도움이됩니다. :)

Demo plunker