Question

我尝试使用显示当前时间的moment.js制作一个Angular组件。

我使用ngOnInit（）设置初始化时的当前时间，然后使用函数updateTime（）尝试更新html中显示的时间属性。

我有一个console.log来显示更新的时间按计划进行，但我不确定如何在视图上显示更新的字符串。它在ngOnInit（）之后保持静态。

请帮助我了解我必须做些什么才能正常运作。

import { Component, OnInit } from '@angular/core';
import $ from 'jquery';

@Component({
  selector: 'app-time',
  templateUrl: './time.component.html',
  styleUrls: ['./time.component.css']
})

export class TimeComponent implements OnInit {

  time: any;

  constructor() { 

  }

  ngOnInit() {
    var moment = require('moment');
    this.time = moment().format('h:mm:ss a');
    this.updateTime();
  }

  updateTime() {
    var moment = require('moment');
    setInterval( function() {
      var now = moment();
      this.time = now.format('h:mm:ss a');
      console.log(this.time);
    }, 1000);
  }

}

Answer 1

这不能在setInterval函数范围中使用。

像这样设置：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="modal fade listing-id" id="closeListingModal" role="dialog">
  <div class="modal-dialog closelistingmodal-dialog">
    <!-- Modal content-->
    <div class="modal-content closelistingmodal-content">
      <form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action="">
        <input type="hidden" name="listing_id">
        <input type="hidden" name="listing_weight">

        <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="closelistingmodal-body modal-top-padding">
          <div class="col-sm-12 "> 
            <div class="col-md-12 col-xs-12 cell-no-padding">
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <input type="radio" name="reason-closing" value="1" id="rad1" class='radioBtns'><label for="rad1" class='radioBtns'> Rate Mismatch</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <input type="radio" name="reason-closing" value="2" id="rad2" class='radioBtns'><label for="rad2" class='radioBtns'> Program Cancelled / Differed</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <input type="radio" name="reason-closing" value="3" id="rad3" class='radioBtns'><label for="rad3" class='radioBtns'> Vehicle Unavailable</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding" >
              <input type="radio" name="reason-closing" value="4" id="rad4" class='radioBtns'><label for="rad4" class='radioBtns'> Listing Fulfilled By Party</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <input type="radio" name="reason-closing" value="5" id="rad5" class='radioBtns'><label for="rad5" class='radioBtns'> Payment Terms Mismatch</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <input type="radio" name="reason-closing" value="6" id="rad6" class='radioBtns'><label for="rad6" class='radioBtns'> Wrong Post</label>
            </div> 
          </div>
          <div class="form-group col-sm-12">    
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
              <label>Rate PMT:</label>
              <input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)"/ min="0">
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks">
              <label>Weight (MT):</label>
              <input class ="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" />
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
              <label>Rate FTL:</label>
              <input class=" form-control input-pmtftl-amount" type="text"  id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)"/ min="0">
            </div>
          </div>
          <div class="form-group col-sm-12"> 
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm">
              <textarea type="text" class=" form-control row-margin" 
                name="listing_notes" placeholder="Notes"/></textarea>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs">
              <textarea type="text" class=" form-control row-margin" 
                name="listing_notes" placeholder="Notes"/></textarea>
            </div>  
          </div>
        </div>
        <div class="modal-footer ">
          <button class="v2-button  closing-submit-btn" name="closelisting-submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

Angular 4动态更新组件视图？

1 个答案: