angular table: 绑定多个日历

Question

我在 table 的每一行上添加了一个日历，但是当我从日历组件中选择一个日期时，它还会更改所有其他日历从其他行中选择的值：

问题出现在属性“selectedValue:Date”，它绑定了 table 中的每个日历。我试图将此“selectedValue:Date”属性转换为日期数组，以便为 table 中的每个“SelectedDate”建立索引，但它也没有用。

打字稿：

export class AppComponent {
 selectedDate: Date;
  ...

HTML:

     <td>
        <p-calendar [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true"
          yearRange="2022:2100" appendTo="body" dateFormat="dd/mm/yy"
        [(ngModel)]="selectedDate">
        </p-calendar>
     </td>

这里是我测试过的源代码，以便更好地说明： source code

Answer 1

因为您对所有迭代行使用单个属性。改变一个地方的价值反映了所有其他地方。一种方法是扩展后端的响应以添加一个属性命名日期，然后您可以从这样的模板中设置它。

component.ts

this.productService
  .getProductsSmall()
  .then((data) => (this.products = data.map((item)=>({...item,date:''})) 
));

component.html

  <tr>
      <td>{{ product.code }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.category }}</td>
      <td>{{ product.quantity }}</td>
      <td>
        <p-calendar
          [showIcon]="true"
          [monthNavigator]="true"
          [yearNavigator]="true"
          yearRange="2022:2100"
          appendTo="body"
          dateFormat="dd/mm/yy"
          [(ngModel)]="product.date"
        >
        </p-calendar>
      </td>
    </tr>

Working Example

angular table: 绑定多个日历

angular table: binding multiple calendars

primeng

angular