小编Dra*_*axy的帖子

我有一个带有SVG的div:

.svg * {
  display: block;
  margin: 0 auto;
  fill: red;
}

<div class="foo ball design">
  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">
    <g>
      <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>
      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect>
      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect>
      <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>
      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>
    </g>
  </svg> …

上周我开始学习 Angular 4 和 TypeScript，我遇到了第一个障碍。

我正在尝试制作一个简单的日期和时间组件。从 Javascript 的角度来看，我看不出有什么问题，但我认为我没有按照 Angular 想要的方式使用范围，所以我正在寻找一些指导。错误是： Failed to compile very/long/file/path/date-time.component.ts (35,18): Property 'date' does not exist on type 'DateTimeComponent'.

我怀疑我没有将我的方法放在正确的位置，或者我需要在setTime(). 任何建议非常感谢。

日期时间.component.ts：

export class DateTimeComponent implements OnInit {

  constructor() { 

  }

  ngOnInit() {
    this.setTime();
  }

  checkTime(i) {
    return (i < 10) ? "0" + i : i;
  }

  setTime() {

    let month = ["January", "February", 
    "March", "April", 
    "May", "June", 
    "July", "August", 
    "September", "October", 
    "November", "December"];

    //date
    let date: Date = new Date(); // this …

我正在尝试以我的第一个Angular形式获取输入字段的值，但是它始终是未定义的，而且我不知道为什么。我正确地导入了FormsModule，并且可以很好地引用表单对象，因此我必须缺少明显的东西。

我的组件HTML

<form #searchValue='ngForm' class="" (ngSubmit)='submitSearch(searchValue)'>
  <div>
    <input type="text" name="q" placeholder="search">
  </div>
</form>

和我的组件ts方法（缩短）

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

export class GoogleComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  submitSearch(formData) {
    console.log(this.searching);
    console.log(formData.value.q);    
  }
}

有什么想法为什么呢？

在 Netlify 构建中调试一个看似无关的错误时，这突然发生。我本地没有这个问题。我已经清除了我的缓存，删除了我的包锁和节点模块文件夹并更新了所有内容，并在 Netlify 上运行了一个没有缓存的构建。我也检查了文件/文件夹名称是否区分大小写。会是什么呢？

组件使用的模板之一：

import React, { Component } from 'react'
import GridTemplate from '../components/GridTemplate/GridTemplate.js'
import { graphql } from 'gatsby'
...

class Mediums extends Component {    
  render() {
    let allTitles = []
    this.props.data.allMarkdownRemark.edges.forEach( post => {
      allTitles.push(post.node.frontmatter.title)
    })
    return (
      <div style={{position: "absolute", width: "100%", height: "100%", overflow: "hidden", overflowY: "scroll"}}>
        <HeaderMeta subTitle={this.props.pageContext.medium} itemGroup={this.props.data.allMarkdownRemark}/>
                 
        <GridTemplate 
          data={this.props.data.allMarkdownRemark.edges} 
          title={this.props.pageContext.medium}
          pastUrl={this.props.location.pathname}  
        />
        
      </div>
    )
  }
}

export default Mediums

GridTemplate 组件：

import React, { Component } from 'react';
import S …