小编sos*_*ick的帖子

我们有菜单。如果菜单是打开的，我们应该可以通过单击任意位置来关闭它：

class Menu extends Component {
  componentWillMount() {
    document.addEventListener("click", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.handleClickOutside);
  }

  openModal = () => {
    this.props.showModal();
  };

  handleClickOutside = ({ target }) => {
    const { displayMenu, toggleMenu, displayModal } = this.props;

    if (displayMenu) {
      if (displayModal || this.node.contains(target)) {
        return;
      }
      toggleMenu();
    }
  };
  render() {
    return (
      <section ref={node => (this.node = node)}>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
        <p>
          <button onClick={this.openModal}>open modal</button>
        </p>
      </section>
    );
  }
} …

我想使用 with 创建一个函数，我可以在不提交的情况下重置表单输入中的值。我尝试在应用程序组件（resetFormFields）中创建该函数并将其传递给表单组件。当我想在 onSubmit (e.target.reset()) 上执行此操作时，这很简单，但是当我必须在与表单不同的元素上执行此操作而无需提交时，我陷入了困境。我可以在不将这些值添加到状态的情况下做到这一点吗？

应用程序：

class App extends Component {

state = {
    people: [],
    formMessages: [],
    person: null
};

handleFormSubmit = e => {

    e.preventDefault();

    const form = e.target;
    const name = form.elements["name"].value;
    const username = form.elements["username"].value;

    this.addPerson(name, email);
    form.reset();
};

resetFormFields = () => {
    return;
}

render() {

    return (
        <div className="App">
            <Form formSubmit={this.handleFormSubmit} 
                  reset={this.resetFormFields} />
        </div>
    );
}

形式：

    const Form = props => (
  <form className={classes.Form}
    id="form"
    onSubmit={props.formSubmit}>

    <input autoFocus
        id="name"
        type="text"
        defaultValue="" …

我想创建我的第一个 Angular 项目。一开始我遇到了问题，因为当我转到项目文件夹并键入：

ng new my-first-project

没发生什么事。我只看到空白终端：

我的：

npm -v: 6.4.1
node -v: 10.11.0
ng -v: Mg++ version:
  Mg++ 1.5beta1 (formerly MicroGnuEmacs Adv.)

我试过：

sudo npm uninstall -g angular-cli @angular/cli 
npm cache clean 
sudo npm install -g @angular/cli

但一切都没有改变。我也用 node 8.xx 尝试过同样的方法，但是效果是一样的。

我在 Ubuntu 16.0.4 上工作，我的默认系统语言与英语不同。

我在我的 Angular 应用程序中使用了 ngx-translate。我在 app.module.ts 中导入并完成了所有操作：

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

我正在导入和导出模块，例如 github ngx-translate 页面上的示例。翻译器工作正常。

但是我有一个子文件夹，里面有他自己的 module.ts 文件，pages.module.ts。当我想在 pages 文件夹中的 html 文件上使用 …

我必须在导航栏的右侧添加一个小下拉菜单。我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。

<li class="nav-item dropdown">
      <a href="#"
      id="navbarDropdown"
      data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false"
      class="nav-link dropdown-toggle">
      some text
      </a>
      <div aria-labelledby="navbarDropdownLangMenu"
          class="dropdown-menu">
      <a class="dropdown-item">AA</a>
      <a class="dropdown-item">BB</a>
      </div>
    </li>

除了元素的宽度之外，一切都工作正常。每个链接只有两个字符，但它们的宽度很大，超出了屏幕的宽度：

我必须从 flickr API 获取数据。正是我需要来自我的 URL 的“照片”数组。当我获取 app.component 中的数据并对其进行操作时，它会起作用，但我知道这不是一个好的解决方案。

我试过：

照片.ts：

  export class Photo {
    title: string;
    farm: number;
    secret: string;
    server: string;
    owner: string;
    id: string;
  };

app.component.ts:

  export class AppComponent implements OnInit {

    photos: Photo[];

    constructor(private http: HttpService) {}

    ngOnInit() {
      this.getData();
    }

    getData() {
      this.http.getData().subscribe(data => {
        this.photos = data;
      });
    }
  }

和我的主要问题，http.service.ts：

export class HttpService {

  constructor(private http: HttpClient) { }

  getData(): Observable<Photo[]> {
    return this.http.get('https://api.flickr.com/path')
      .map(res => res.photos.photo);
  }
}

在我看来，一切都应该正常工作，但我收到一个错误：

ERROR in src/app/http.service.ts(18,23): error …

我必须制作乘法表,对于n = 3看起来像这样:

1 x 1 = 1 | 1 x 2 = 2 | 1 x 3 = 3 
2 x 1 = 2 | 2 x 2 = 4 | 2 x 3 = 6 
3 x 1 = 3 | 3 x 2 = 6 | 3 x 3 = 9

现在我的代码看起来像这样:

var n = 3;
var result;

for (i = 1; i <= n; i++) {
    var result = '';
    for(j = 1; j <= n; …