小编Hug*_*iro的帖子

我是React的新手,我正在尝试DATA从外部文件导入JSON 变量.我收到以下错误:

找不到模块"./customData.json"

有人可以帮助我吗？如果我有DATA变量index.js但它不在外部JSON文件中时,它可以工作.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5> …

我通过@Input 在我的组件中接收一个对象

@输入事件

现在我需要在我的角度材料表上使用费用数组。

<div class="table-container" *ngIf="event">
    <table mat-table [dataSource]="event" class="mat-elevation-z8">

        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element"> {{event.type}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
</div> 

但我收到错误：

提供的数据源与数组、可观察对象或数据源不匹配

我需要帮助才能在我的应用中创建搜索过滤器.它是一个简单的应用程序,用于研究目的.

目标是创建一个搜索过滤器.我在search_bar容器中有状态,我想我需要将它作为道具传递给我的work_list容器.但我不知道该怎么做.从那个阶段我会做到这样的事情.

work_list.js

renderWork() {

    let filteredWorks = this.props.works.filter((work) => {
      return work.title.indexOf(this.state.init) !== -1;
    }
    );


    return filteredWorks.map((work) => {
      return (
        <tr>
          <td>{work.title}</td>
        </tr>
      );
    });
  }

我不知道逻辑是否正确.需要帮忙.

app.js

import React, { Component } from 'react';
import SearchBar from '../containers/search_bar';
import WorkList from '../containers/work_list.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <SearchBar/>
        <WorkList/>
      </div>
    );
  }
}

search_bar.js

import React, { Component } from 'react';

export default class SearchBar extends Component …

如何设置滑动切换的默认值？

我可以在 ngOnInit 中为我的属性设置初始值，但必须有一个“Angular Way”

            <mat-slide-toggle
              [checked]="system.ignoreUser"
              (toggleChange)="system.ignoreUser= !system.ignoreUser">
              <span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
              <span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
            </mat-slide-toggle>

谢谢你！

目标是在数组中添加另一个项目,并创建一个像["Car","House","Boat"]等数组.

发生的事情是当我控制日志时,我的数组中只有一个项目,而不是我从表单提交的所有值.

这是我的表格

<form onsubmit="guardarNumeros()">
 <p>Please insert the items</p>
 <input type="text" id="box">
 <input type="submit" value="Submit">
</form>

我的js

function guardarNumeros(){

 var items = [];
 boxvalue = document.getElementById('box').value;
 items.push(boxvalue);  
 console.log(items);

}

谢谢 !

我有一个选择器<mat-button-toggle-group [value]="myValue"></mat-button-toggle-group>

我想要获得[value]价值，为此我做到了。

buttonToggleGroupSelector.should('exist').and('has.value', 'MyValue');

但这返回一个空字符串而不是属性值。

在我的NgOnInit()上，我\xc2\xb4m 创建一个像这样的新表单。

  ngOnInit(){\n    this.expenseForm = this.fb.group({\n      type: \'\',\n      expenses: this.fb.array([this.buildExpense()])\n    })\n  }\n

我有一个名为type的键，它在我的对象上以空开头，还有一个名为expenses的键

  buildExpense(): FormGroup {\n    return this.fb.group({\n      description: \'\',\n      quantity: \'\',\n      price: \'\'\n    })\n  }\n\n  addExpense(): void {\n    this.expenses.push(this.buildExpense())\n  }\n

  <button class="btn btn-outline-primary add" type="button" (click)="addExpense()">Add Expense</button>\n