小编use*_*656的帖子

你能告诉我如何在 angular 的下拉列表中添加 onchange 事件吗？我做了一个简单的演示，最初我bank names在drop down. 现在我想添加on change event那个下拉列表。换句话说，我想bank选择哪个用户。使用 bank我想要的名字state names

这是我的代码 https://stackblitz.com/edit/angular-batt5c

<select class='select-option' 
        (ngModelChange)='onOptionsSelected($event)'>
    <option class='option' 
    *ngFor='let option of dropDownData' 
    [value]="option.seo_val">{{option.text_val}}</option>
</select>

onOptionsSelected(){
  console.log('===');
  // send selected value
  this.seletedValue.emit('');
}

我有两个组成部分.在第一个组件中,我有一个按钮.单击按钮我想导航到另一个组件或另一个页面.

这是我的代码 http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {
    handleClick(){
      alert('---');
    }

    render() {
        return <button onClick={this.handleClick}>hello</button>
    }
}

class Second extends React.Component {
    render() {
        return <label>second component</label>
    }
}

React.render( <App /> , document.getElementById('app'))

我试图过滤我的字段,同时绑在输入字段中autocomplete.我喜欢这样,但它不会过滤我的列表

这是我的代码

 onChangeHandler(e){
    console.log(e.target.value);
    var newArray = this.state.users.map((d)=>{
      return d.indexOf(e.target.value) !== -1 
    });
    console.log(newArray)
    this.setState({
      users:newArray
    })
  }

http://codepen.io/anon/pen/zNYGzb?editors=1010

我正在使用带有react的材质UI。我在表中显示我的数据。实际上在表中我有一些titles示例" GENERAL_INFORMATION"并且INFORMATION是标题。我想在中间显示它。但是我的table cell宽度没有100%，为什么？

这是我的代码 https://codesandbox.io/s/qlj0l8yrx9

 <Fragment>
                    <TableRow key={row.id}>
                      <TableCell> {title}</TableCell>
                    </TableRow>
                    {row.map(({ displaytext, value }) => (
                      <TableRow key={row.id}>
                        <TableCell>{displaytext}</TableCell>
                        <TableCell>{value}</TableCell>
                      </TableRow>
                    ))}
                  </Fragment>

我正在从此网址获取帮助 https://material-ui.com/demos/tables/

我有一个项目列表（示例名称）。我正在尝试在列表中显示所选项目。.Selected items 有一个selected类，它将为该元素添加一个边框。

.selected {
  border: 1px solid blue;
}

selected Item 用一个变量决定const selectedItem = 1;它1是否会选择seconditem 。如果const selectedItem = 0;它会选择第一个元素。

问题陈述

1. 我有className="container"宽度的包装 div 200px。它将包含尽可能多的列表元素。这取决于项目宽度。

示例列表项（参见示例 1 它只显示三个项，因为所有文本都很小。）

const data = [
  { title: "xahsdha" },
  { title: "hello" },
  { title: "hessllo" },
  { title: "hesslssslo" },
  { title: "navveiii" }
];

带有新数据的示例 2：请参阅项目第一个文本很大。它只显示一项。

const data = [
  { title: "xahsdhaadasdasdasdass" },
  { title: "hello" …

为什么templateUrl不工作在角度2.当我使用模板它工作.它不工作..我的代码

http://plnkr.co/edit/WI4gK2vbaj4OUX5ImJor?p=preview

import {Component,View} from 'angular2/core';

@Component({
    selector: 'my-app',
//  template: '<div (click)="onclck()">hello</div>'
})

@View({
  templateUrl: 'home/home.html'
});
export class AppComponent {

  onclck(){
    alert('--')
  }

}

你能告诉我如何只在第一次从服务器获取数据并显示到屏幕上吗？但是如果用户再次来或者组件再次加载它从商店获取数据。我正在使用 redux 和 ngrx 。

我制作了一个示例应用程序，其中有两个按钮home screen 和new screen主屏幕，我显示来自的列表server。当我单击new screen按钮并返回主屏幕时，它再次服务器并获取数据。我不想再次点击。我想从中获取数据。store我将如何获取它

这是我的代码

（不要在 chrome stackblitz 中打开此链接在 chrome 中有问题）

export class ListComponent implements OnInit {

 products$: Observable<Product[]>;
  constructor(private productService: ProductService,
              private store: Store<fromApp.ProductState>,
              private router : Router
              ) {}

 ngOnInit() {
    this.store.dispatch(new productActions.Load());
    this.products$ = this.store.pipe(select(fromProduct.getProducts))
  }
}

我试图使用delete按钮从列表中删除行.我喜欢这样

if (state.indexOf(action.payload) > -1) {
      console.log('iff----')
        state.splice(state.indexOf(action.payload), 1);
    }
          console.log(state)

     return state

但它没有删除行.我的代码是 https://plnkr.co/edit/bpSGPLLoDZcofV4DYxPe?p=preview 实际使用添加按钮我生成项目列表,并且有删除按钮我试图从中删除项目列表使用delete button 你能告诉我为什么它不工作？

你能告诉我如何隐藏前两个里之外的所有里吗？在第二种情况下，我想隐藏所有希望在按钮上显示 3 和 4 li 的 li，单击此处是我的代码

https://jsbin.com/damolibule/edit?html,js,输出

$(function() {
  $('#id_show12').click(function() {
    $('.show12').not(":nth-child(2)").css("display", "none"); 
  })

  $('#id_show34').click(function() {
    $('.show34').not(":nth-child(5)").css("display", "none");  
  })
})

预期输出：当单击第一个按钮时，它1仅显示2。如果用户单击第二个按钮，则会显示3和4。

我正在尝试add 10使用map按钮单击功能在每个元素中编号（数字）。我试过这样

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>


    </style>
  </head>

  <body>

    <button class="add">ADD</button>
    <ul class="item">
      <li class="abc">123</li>
      <li class="pp">12</li>
      <li class="abc">78</li>
      <li class="ac">13</li>
    </ul>
    <script>
    $(function () {

        $('.add').click(function () {
            var $items = $('.item li');
            var $newItem =$items.map(function (i,item) {
                console.log($(item).text())
                return $(item).text() +10;
            });
            console.log($newItem)
        });

    });
    </script>
  </body>

</html>

预期输出

133
22
88
23

我已经提供了不同的密钥。为什么它给我警告？这是我的代码 https://codesandbox.io/s/0xvqw6159n

<TableBody>
              {fetchData.map(([title, row], index) => {
                return (
                  <Fragment>
                    <TableRow key={index}>
                      <TableCell colSpan="2">{title}</TableCell>
                    </TableRow>
                    {row.map(({ displaytext, value }, i) => (
                      <TableRow key={index + i}>
                        <TableCell>{displaytext}</TableCell>
                        <TableCell>{value}</TableCell>
                      </TableRow>
                    ))}
                  </Fragment>
                );
              })}
            </TableBody>

我在我的demo react项目中使用了日期打包程序。 https://www.npmjs.com/package/react-datepicker 一切正常，但是我有一个问题whenever I remove one text from date value it gives me this error

未捕获的RangeError：options.awareOfUnicodeTokens必须设置 true为使用YYYY令牌；参见：https : //git.io/fxCyr 在parseDate（nk7475yjwl）解析（nk7475yjwl.codesandbox.io/node_modules/react-datepicker/lib/index.js:5733）时throwProtectedError（nk7475yjwl.codesandbox.io/node_modules/react-datepicker/lib/index.js:2211） .DestPicker的.codesandbox.io / node_modules / react-datepicker / lib / index.js：5962）._ this.handleChange（HTML747） （react-dom.development.js：145）在Object.invokeGuardedCallbackDev（react-dom.development.js：195）在invokeGuardedCallback（react-dom.development.js：248）在invokeGuardedCallbackAndCatchFirstError（react-dom.development.js： 262）在executeDispatch（react-dom.development.js：593）在executeDispatchesInOrder（react-dom.development.js：615）在executeDispatchesAndRelease（react-dom.development.js：713）在executeDispatchesAndReleaseTopLevel（react-dom.development.js：724）在Array.forEach（）在forEachAccumulated（react-dom.development.js：692）在runEventsInBatch（在runExtractedEventsInBatch（react-dom.development.js：864）在handleTopLevel（react-dom.development.js：4857）在runExtractedEventsInBatch（react-dom.development.js：4857）在batchedUpdates $ 1（react-dom.development.js：17498）在batchEvent（react-dom.development.js：2189）在batchedUpdates（react-dom.development.js：4936）在InteractiveUpdate（react-dom.development.js：17553）在InteractiveUpdate（react-dom.development.js：17553） ：2208）在dispatchInteractiveEvent（react-dom.development.js：4913）在Array.forEach（development.js：724）在runExtractedEventsInBatch（react-dom.development.js：864）的runEventsInBatch（react-dom.development.js：855）的forEachAccumulated（react-dom.development.js：692） ）的内容位于handleTopLevel（react-dom.development.js：4857），位于batchedUpdates $ 1（react-dom.development.js：17498）位于batchEvents（react-dom.development.js：2189）在dispatchEvent（react-dom.development。 js：4936）在InteractiveUpdates $ 1（react-dom.development.js：17553）在dispatchInteractiveEvent（react-dom.development.js：2208）在dispatchInteractiveEvent（react-dom.development.js：2208）在Array.forEach（development.js：724）在runExtractedEventsInBatch（react-dom.development.js：864）的runEventsInBatch（react-dom.development.js：855）的forEachAccumulated（react-dom.development.js：692） ）的内容位于handleTopLevel（react-dom.development.js：4857），位于batchedUpdates $ 1（react-dom.development.js：17498）位于batchEvents（react-dom.development.js：2189）在dispatchEvent（react-dom.development。 js：4936）在InteractiveUpdates $ 1（react-dom.development.js：17553）在dispatchInteractiveEvent（react-dom.development.js：2208）在dispatchInteractiveEvent（react-dom.development.js：2208）864）在handleTopLevel（react-dom.development.js：4857）在batchedUpdates $ 1（react-dom.development.js：17498）在batchEvent（react-dom.development.js：2189）在dispatchEvent（react-dom.development） .js：4936），位于InteractiveUpdates $ 1（react-dom.development.js：17553），位于dispatchUpdateInteractiveEvent（react-dom.development.js：2208），位于dispatchInteractiveEvent（react-dom.development.js：4913）864）在handleTopLevel（react-dom.development.js：4857）在batchedUpdates $ 1（react-dom.development.js：17498）在batchEvent（react-dom.development.js：2189）在dispatchEvent（react-dom.development） .js：4936），位于InteractiveUpdates $ 1（react-dom.development.js：17553），位于dispatchUpdateInteractiveEvent（react-dom.development.js：2208），位于dispatchInteractiveEvent（react-dom.development.js：4913）

产生错误的步骤

1. 运行应用程序，它显示 09-Dec-1998
2. 尝试8从字段或从中删除1998。它显示以上错误

这是我的代码

https://codesandbox.io/s/nk7475yjwl

git链接 https://github.com/Hacker0x01/react-datepicker

我正在尝试获取lilist 的最后一个元素。但它没有给出正确的输出。这是我的标记

<div class="abc">
    <ul>
      <li>1</li>
      <ul><li>1.1</li><li>1.2</li></ul>
      <li>2</li>
       <ul><li>2.1</li><li>2.2</li></ul>
      <li>3</li>
        <ul><li>3.1</li><li>3.2</li></ul>
    </ul>
  </div>

尝试这样

console.log(document.querySelector('.abc ul li:last-child').innerHTML)

输出元件

<li>1.2</li>

预期产出

 <li>3</li>