前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 循环内使用 material datepicker

Angular 循环内使用 material datepicker

作者头像
mafeifan
发布2019-02-25 15:02:53
1.8K0
发布2019-02-25 15:02:53
举报
文章被收录于专栏:finleyMa

material datepicker 需要用到模板变量,如果需要在循环出来datepicker可以这么干

  1. 直接把 *ngFor 中的index传给[matDatepicker],用来引用组件
  2. *ngFor="let editItem of budget.edits; index as j;index as k;" j是组件的引用,k是循环索引。支持这种写法,把k传到方法里,方便操作哪一个日期组件。 实例 看代码
代码语言:javascript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-muldatepicker',
  templateUrl: './muldatepicker.component.html',
  styleUrls: ['./muldatepicker.component.styl']
})
export class MuldatepickerComponent implements OnInit {
  result = {
    budgets: []
  };

  constructor() {
  }

  ngOnInit() {
    this.result = {
      'budgets': [{
        id: 1,
        edits: [
          {
            'id': 10,
            'date': new Date('2019-01-01 00:00:00'),
            amount: 100,
          },
          {
            'id': 11,
            'date': new Date('2019-01-18 00:00:00'),
            amount: 150,
          }
        ]
        },
        {
          id: 2,
          edits: [
            {
              'id': 21,
              'date': new Date('2019-02-10 00:00:00'),
              amount: 0,
            }
          ]
        }
      ]
    }
  }

  onAddOrUpdate() {
    console.log(arguments);
  }

}

模板

代码语言:javascript
复制
<pre>{{result.budgets|json}}</pre>
<mat-list *ngFor="let budget of result.budgets;index as i;">
  <div *ngFor="let editItem of budget.edits; index as j;index as k;">
    <mat-form-field>
      <input matInput [matDatepicker]="j" [(ngModel)]="editItem.date" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="j"></mat-datepicker-toggle>
      <mat-datepicker #j></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
      <input type="number" min="0" matInput placeholder="amount" [(ngModel)]="editItem.amount">
    </mat-form-field>
    <button mat-icon-button color="primary" (click)="onAddOrUpdate(budget.id, editItem, i, k)">
      <mat-icon>edit</mat-icon>
    </button>
  </div>
</mat-list>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.01.13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档