Html 如何区分一个组件与另一个组件的行为[角度]

我正在学习。我从头开始创建了一个

datepicker

（“为什么从头开始是另一个故事”）。如您所见，我在同一个小部件中有两个日期选择器自定义组件。两者的代码相同。我只是复制并粘贴在同一个HTML文件中

这是我的monthpicker.component.html

注意：

dls

是我们自己的基本html组件库，如textfields等。请忽略这一点

....
<div class="dropdown">
  <span>
    <dls-textbox id="upper">
        <input dlsInput [ngModel]="text" placeholder="...">
    </dls-textbox>
  </span>
  <div class="my-table-div dropdown-content">
    <div class="year-div">
        <input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
    </div>
    <br>
    <div *ngFor="..." class="my-table">
      <span *ngFor="...">
        <span class="month-name" (click)="onClick(x);">
          {{ x.monthName }} 
        </span>
      </span>
    </div>
</div>

<!-- A TOGGLE SWITCH GOES HERE-->

<!-- THEN SAME DATE PICKER CODE I COPIED BELOW-->
<div class="dropdown">
  ...
</div>

。。。。


{{x.monthName}
...

但问题是，在一个日历中选择的日期也会反映在后一个日历中。

我试图通过改变

id

和

class

来分离它们。但他们两人仍在共同应对。我希望他们独立行动

---

请更正。

请确保用另一个日期清除您选择的日期。Make“ID”在每个成分中应该不同。

尝试更改ngModel值

 <div class="year-div">
        <input type="number" [(ngModel)]="year" value="2019" min="2018" max="2024">
   </div>

---

如果为两个模型输入相同的值，它也将反映另一个模型。您需要为每个ng模型使用不同的值。

之所以发生这种情况，是因为您使用

[ngModel]

将两个输入绑定到同一个变量，因此其中一个变量的更改会反映在另一个变量中。

看起来发生这种情况是因为您使用

[ngModel]

@NicholasK>绑定到相同的变量。好的，让我更改变量，然后重试。我会让你知道的。谢谢，是的。成功了。我犯了这么愚蠢的错误。对不起。将此作为答案发布，以便我可以接受。这将是因为绑定。。[ngModel]应该有所不同。另外，您为获取日期而传递的变量也应该不同。这已经得到了回答，我感谢您的帮助。谢谢