javascript - 可观察数组中的项目未添加到列表 KO

Question

我从加载的列表中获取一些数据并将它们添加到可观察数组中，我想将它们显示在另一个列表中，除了数据未显示在屏幕上之外，一切都会进行这是代码

 self.addData = function (val) {
        
        self.finalList().push(val);

        alert(val.LATIN_DESC);

    }

   <div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC , value: SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>

Answer 1

@connexo 关于 observableArray 的确切内容，以及在绑定(bind) b 元素时，使用文本而不是值是有意义的，因为 b 元素不会设置更改值。

 
 function TestVM (){
   var self = this;
   self.finalList = ko.observableArray();
    self.addData = function (val) {
        
        self.finalList.push(val);

        alert(val.LATIN_DESC);

    }
    
    self.addData({LATIN_DESC: 'RR', SYS_KEY: 'GG'});
 }
 
 ko.applyBindings(new TestVM())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="container">
                            <h2> Added servcies</h2>
                            <div class="row" style="height:20vh; overflow:auto;">
                                <div class="col-md-3">
                                    <ul data-bind="foreach:finalList">
                                        <li class="list-group-item">
                                            <div class="col-xs-3">
                                                <b data-bind="text:LATIN_DESC +'-'+ SYS_KEY"></b>
                                            </div>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                         
                        </div>