时间戳

首页 > 解决方案 > 如何使用相同的数组 [Angular] 将单向更改应用于两个下拉列表

angular - 如何使用相同的数组 [Angular] 将单向更改应用于两个下拉列表

问题描述

我是新手Angular。很抱歉不能很好地提出这个问题。我正在制作角度的销售比较组件。我在一个小部件中有两个下拉列表。一个是主要的，另一个是次要的。我的任务是同步这两个下拉列表。我的意思是，如果我在主要选项中选择一个选项，那么该选项也应该在次要选项中被选中。但不应该发生相反的情况。这就是我oneway change在问题中的意思。

这是一个屏幕截图以进一步解释： 在此处输入图像描述

这意味着不应该发生反向选择。为了节省大家的时间，我创建了一个stackblitz。您也可以直接查看。

这是我的代码：

timeselector.component.html

<div class="time-selector">
    <p-overlayPanel class="my-overlay" #op>
        <br />
        <div class="inner-panel">
          <h2>Time selection widget</h2>
          <br>
          <h3>Primary dropdown</h3>
          <select [(ngModel)]="primaryMode" name="source">
            <option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
              {{ mode }}
            </option>
          </select>
          <br><br><br><br>
          <h3>Secondary dropdown</h3>
          <select [(ngModel)]="primaryMode" name="source">
            <option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
              Previous {{ mode }}
            </option>
          </select>
        </div>
    </p-overlayPanel>
</div>

<div class="input-field" (click)="op.toggle($event)" style="margin-left: 100px">
    <h4 style="color: white; float: left; margin-left: 10px;">Click here</h4>
</div>

注意：辅助下拉列表也使用相同的数组，但值以Previous为前缀。

timeselector.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-timeselector',
    templateUrl: './timeselector.component.html',
    styleUrls: ['./timeselector.component.css']
})
export class TimeselectorComponent {
    modes = ['Year', 'Quarter', 'Sprint'];
    public selectedSource = 'Year';
}

请纠正我并帮助我实现该逻辑。请让我知道它是否可行。也许我在浪费我和大家的时间。

标签： angulartypescript

解决方案

两个下拉菜单上的[(ngModel)]应该不同。对于主要下拉更改，您可以使用设置次要的值(ngModelChange)

试试这样：

<h3>Primary dropdown</h3>

<select [(ngModel)]="primaryMode" name="source" (ngModelChange)="secondaryMode = primaryMode">
     <option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
          {{ mode }}
     </option>
</select>

<br><br><br><br>

<h3>Secondary dropdown</h3>

<select [(ngModel)]="secondaryMode" name="source">
     <option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
          Previous {{ mode }}
     </option>
</select>

工作演示

推荐阅读