如何在angular2之后更新值的angular2中进行观察?

时间:2016-08-04 11:41:21

标签: typescript angular angular2-observables

我在angular2中创建了observable。

我想创建一个可在2秒后更新值的observable。 到目前为止,我已经创造了类似的东西。

<!DOCTYPE html>
<html>
<body>
<select id='sel' onchange="getSelValue()">
  <option value="data_20160712">data_20160712</option>
  <option value="data_20160711">data_20160711</option>
</select>     
<p id="inhtml"></p>
</br></br></br></br>  
<table id="data0" cellspacing="0" width="100%">	
    <thead>
		<tr>
			<th>Field1</th>
			<th>Field2</th>
			<th>Field3</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>SP Code</th>
			<th>SP Name</th>
			<th>Contract number</th>
		</tr>
	</tfoot>
</table>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js "></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/datetime.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#data0 tfoot th').each( function (i) {
            var title0 = $('#data0 thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title0+'" data-index="'+i+'" />' );
        } );

        // DataTable
        var table = $('#data0').DataTable( {
            "pageLength": 10,
            "lengthChange": true,
            responsive: true,
            //fixedHeader: false,
            "scrollX": true,
            "ajax": "json/data_20160712.json", 
            deferRender:    true,
            dom: 'Blfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: "data_20160712"
                },
                {
                    extend: 'csvHtml5',
                    title: "data_20160712"
                },
                {
                    extend: 'colvis',
                    title: "data_20160712"
                },
            ]
        //FIX HEADER SIZE
        } );
        // Apply the search
            table.columns().every( function () {
                var that= this;

                $( 'input', this.footer() ).on( 'keyup change', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
    } );
</script>
<script>
function getSelValue() {
    //console.log($( "#sel option:selected" ).text());
    $('#data0').DataTable().ajax.url('json/'+$( "#sel option:selected" ).text()+'.json').load();
}
</script>
</html>

目前,在2秒后,我的observable以32更新了值。

但是我想重复运行这个函数,直到值达到10000.

我想将斐波纳契系列存储在这个可观察的区域并打印出来。

使用angular2 observables

是可能的吗?

感谢。

1 个答案:

答案 0 :(得分:0)

您可以在Observables上使用interval()函数:

 TabLayout tablayout;
      @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main); //your activity layout
            tabLayout =(TabLayout)findViewById(R.id.tablayout); //your tab layout id
            tabLayout.getTabAt(0).select(); //your tab index;
    }