提交未定义的下拉列表- Angular4

Question

我设计了下面的表单，使用ngModel香蕉绑定，单击提交按钮，我可以获得所有控件的值，除了下拉控件。另外，我不能给所有使用的单选按钮提供默认的选择选项，下拉式控件也是如此。

我在typescript文件中将mediaModel定义为json对象，并在ngModel中使用它来获取提交按钮上的所有控件的值。

有人能帮我解决这个问题吗？由于我的UI设计很差，我找不到这个问题的根本原因。

​

<li>
      <div class="collapsible-header active">
        <b style="font-size: 15px;">Media Settings</b>
      </div>
      <div class="collapsible-body">

        <div class="container">
          <div class="row ">
            <!-- <form class="col s12" [formGroup]="mediaSettingsForm" id="mediaSettingsForm" novalidate (ngSubmit)="submitMediaSettings(mediaSettingsForm.value, mediaSettingsForm.valid)"> -->
            <!-- <form> -->

            <div class="row" style="margin-bottom: 0px">
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>Disable Touch Screen</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="disable_touch_screen" [(ngModel)]="mediaModel.disable_touch_screen" #disable_touch_screen="ngModel"
                    value="On" type="radio" id="disable_touch_screen_on" [checked]="checkFlag" />
                  <label for="disable_touch_screen_on">On</label>
                  <input class="with-gap" name="disable_touch_screen" [(ngModel)]="mediaModel.disable_touch_screen" #disable_touch_screen="ngModel"
                    value="Off" type="radio" id="disable_touch_screen_off" />
                  <label for="disable_touch_screen_off">Off</label>
                </div>
              </div>
              <div class="row"></div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>RTP Call Assurance</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="rtp_call_assurance" [(ngModel)]="mediaModel.rtp_call_assurance" #rtp_call_assurance="ngModel"
                    value="On" type="radio" id="rtp_call_assurance_on" checked />
                  <label for="rtp_call_assurance_on">On</label>
                  <input class="with-gap" name="rtp_call_assurance" [(ngModel)]="mediaModel.rtp_call_assurance" #rtp_call_assurance="ngModel"
                    value="Off" type="radio" id="rtp_call_assurance_off" />
                  <label for="rtp_call_assurance_off">Off</label>
                </div>
              </div>

              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>Use Internal speaker/mic</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="use_internal_speaker_mic" [(ngModel)]="mediaModel.use_internal_speaker_mic" #use_internal_speaker_mic="ngModel"
                    value="On" type="radio" id="use_internal_speaker_mic_on" checked />
                  <label for="use_internal_speaker_mic_on">On</label>
                  <input class="with-gap" name="use_internal_speaker_mic" [(ngModel)]="mediaModel.use_internal_speaker_mic" #use_internal_speaker_mic="ngModel"
                    value="Off" type="radio" id="use_internal_speaker_mic_off" />
                  <label for="use_internal_speaker_mic_off">Off</label>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <!-- <select class="form-control browser-default" [(ngModel)]="mediaModel.device_type" style="display:block;">
                    <option value="default" disabled selected>Select Device</option>
                    <option value="ANDROID">Android</option>
                    <option value="IOS">iOS</option>                    
                  </select>      -->
                  <select class="form-control browser-default" style="display:block;" [(ngModel)]="mediaModel.device_type">
                    <option value="default" disabled selected>Select Device</option>
                    <option [ngValue]="ANDROID">Android</option>
                    <option [ngValue]="IOS">iOS</option>
                  </select>
                </div>
              </div>
            </div>
            <button type="submit" class="btn btn-default input-field color-blue" (click)="saveMediaSettings()">Save</button>
          </div>
        </div>
      </div>
    </li>

​

Answer 1

您代码的唯一问题是[ngValue]="ANDROID"

将[ngValue]更改为ngValue或value。

备注：

如果将[]与属性一起使用，则右侧将始终是一个表达式，

因此，您可以使用：

[attr]='expression'或attr='{{ expression }}'

但在本例中，它只是一个简单的字符串，所以您可以使用attr='your_value'

Answer 2

让我们在html部分粘贴代码：

  <select class="form-control browser-default" style="display:block;"
                      [(ngModel)]="mediaModel.device_type">
                <option  disabled selected>Select Device</option>
                <option *ngFor="let eachDevice of devices" 
                [ngValue]="eachDevice.name">{{eachDevice.name}}</option>
   </select>

并将代码粘贴到ts文件中。

devices: any = [{name: 'Android'}, {name: 'IOS'}];