Question

我在Angular4中使用ngModel进行条件数据绑定时遇到问题。

解释：

我有一点形式：

<form-question-radio
  [(ngModel)]="model['q4']"
  name="question"
  [options]="[{value:true, label:'Yes'}, {value:false,label:'No'}]"
  required>
      Do you want?
</form-question-radio>

<ng-container *ngIf="model['q4'] == true">
  <form-question-radio
    [(ngModel)]="model['q4_1']"
    name="question4_1"
    [options]="[
      {value:1,label:'Freedom'},
      {value:2,label:'Peace'},
      {value:3,label:'Money'}
    ]" required>
      What do you want?
  </form-question-radio>
</ng-container>

form-question-radio是我的自定义表单控件（实现 ControlValueAccessor ）

我想将值传递给 model ['q4_1'] 仅当第一个问题的答案有 true 值时。如果第一个问题（ model ['q4'] ）的答案有 false ， model ['q4_1'] 将 null。

当我检查第一个问题的真实答案时，问题就开始了，之后检查第二个问题的答案，然后再次检查（再次）错误答案第一个问题。我希望 model ['q4_1'] 值等于null，但不是。

我尝试使用条件绑定，如：

[(ngModel)]="model['q4'] == true ? model['q4_1'] : null"

但它造成了错误。

我在尝试

[(ngModel)]="model['q4'] && model['q4_1']"

太。但它仍然不起作用，因为我猜是返回布尔值。是吗？

问题： 有没有办法通过ngModel绑定条件数据？它应该是什么样的？

Answer 1

第一个解决方案：

使用ngModelChange。它是一个事件，默认情况下，当输入值发生变化时，始终会将新值写入模型，但可以覆盖它。对于使用ngModel的每个组件，它都会自动发出，因此您不必担心这一点。

在模板中：

FileOpenPicker openPicker = new FileOpenPicker();
foreach (string extension in FileExtensions.Video)
{
    openPicker.FileTypeFilter.Add(extension);
}
StorageFile file = await openPicker.PickSingleFileAsync();
// mediaPlayer is a MediaElement defined in XAML
if (file != null)
{
    var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    videoMediaElement.SetSource(stream, file.ContentType);

    var totalDurationTime = videoMediaElement.NaturalDuration.TimeSpan.TotalSeconds;//get value zero
    var totalDurationTime1 = TimeSpan.FromSeconds(videoMediaElement.NaturalDuration.TimeSpan.TotalSeconds);//get zero
    videoMediaElement.Play();
}

在控制器中：

<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ4Change($event)">
</form-question-radio>
<form-question-radio
  [ngModel]="model['q4_1']"
  (ngModelChange)="questionQ41Change($event)">
</form-question-radio>

第二个解决方案：

您还可以为q4和q_1使用getter和setter。

在模板中：

questionQ4Change(newValue) {
  this.model['q4'] = newValue;
  if (!newValue) {
    this.model['q4_1'] = null;
  }
}
questionQ41Change(newValue) {
  this.model['q4_1'] = this.model['q4'] ? newValue : null;
}

在控制器中：

<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>
<form-question-radio
  [(ngModel)]="model['q4_1']"
</form-question-radio>

条件ngModel数据绑定

1 个答案: