Question

我将jquery的datepicker包装在angular2中使用，并且遇到成员变量的类以某种方式发生变化的情况。作为参考，我是初学者。

首先，这是代码（基于http://www.radzen.com/blog/jquery-plugins-and-angular/的示例）：

<main>
    <aside>
      <h3>History of the guitar</h3>
      <p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
        <a href="video.html">Watch video</a>
      </p>
      <h3>Anatomy of the guitar</h3>
      <img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
      <h3>Quote of the day</h3>
      <blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
    </aside>

  <!-- the newly created div -->
  <div id="main-content">
    <h2 class="orange_header">Classical Guitar</h2>
    <p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
      guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>

    <h2 class="orange_header">Before you start...</h2>
    <p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
    <ul>
      <li>Tune your guitar</li>
      <li>Play chords comfortably</li>
      <li>Read tablature</li>
    </ul>
    <p>If you can‘t do these things - do not worry!<br> We suggest you make use of the <a href="useful_links.html">“Useful links”</a> page to teach yourself the basics of guitar.</p>
    <h2 class="orange_header">The Lessons</h2>
    <ol>
      <li><a href="sittingpos.html">Sitting position</a></li>
      <li><a href="readingmusic.html">Reading music</a></li>
      <li><a href="rhtech.html">Right Hand Technique</a></li>
      <li><a href="lhtech.html">Left Hand Technique</a></li>
      <li><a href="pracandmem.html">Practising and Memorization</a></li>
    </ol>
    <h2 class="orange_header">About Annemie</h2>
    <p>Find out more about the author of this site by going to <a href="bio.html">the Bio page.</a></p>
  </div>
  <!-- new div ends here -->


  </main>

在构造函数中，this.date的类型是＆＃39; Date＆＃39;但是到了时间我到了ngAfterViewInit，类型已经以某种方式改为＆＃39; DatePickerComponent＆＃39;。怎么会发生这种情况？

修改的

其他信息：使用datepicker的html类似于

/* we removed the width property to cover the whole page. */
main {
  display: block;
  position: relative;
}

aside {
  display: block;
  float: right;
  width: 40%; /* this was changed */
  margin-top: 1em;
  border-left: 2px solid #ab6b06;
}

#main-content {
  width: 60%; 
}

正如艾哈迈德在他的回答中所描述的那样，这最终意外地将成员变量绑定到元素而不是日期。我的一部分困惑是依赖打字稿是强类型的，但是html和逻辑之间的连接是通过javascript完成的，因此不再具有强类型的属性。

Answer 1

查看github repo后，问题是：

daterangepicker.component.ts 第12行<qnet-datepicker #startDate [date]="startDate" (dateChange)="updateStart(startDate.date, startTime.value)"></qnet-datepicker>

input [date]通过模板引用变量#startDate

引用组件本身

删除它可以解决问题。

typescript成员变量类类型更改

1 个答案: