使用 typescript 在单击时切换表行

Question

我预加载了前五行的表。 但是，我想通过单击按钮来显示总行数。

例子：

 arr = [
     'banana',
     'grape',
     'Orange',
     'Apple',
     'guava',
     'pineapple',
     'mango',
     'watermelon',
     'melon',
     'tangerine',
     'lemon',
     'Strawberry'   
 ];
       setItemsTable(){
         this.arr.slice(5, 0); // show banana,grape,Orange,Apple,guava
       }
     
       toggleDisplayDiv() {
         this.isShowDiv = !this.isShowDiv;
         if(this.arr.length > 5) {
           this.arr.slice(0, this.arr.length);  // show all items
         }
       }

Answer 1

我发现你的代码没有问题。 你的代码似乎没问题。 我只是尝试重现您的代码。

class Fruits {
        constructor(){
        this.isShowDiv = false;
        this.arr = [
              'banana',
              'grape',
              'Orange',
              'Apple',
              'guava',
              'pineapple',
              'mango',
              'watermelon',
              'melon',
              'tangerine',
              'lemon',
              'Strawberry'
          ];
        }

        setItemsTable(lower, upper){
                console.log(this.arr.slice(lower, upper))
                console.log(`Array length : ${upper-lower}`)
        }

        toogleDisplayDiv(){
                this.isShowDIv = !this.isShowDiv
                if (this.arr.length > 5){
                        console.log(this.arr.slice(0, this.arr.length))
                        console.log(`Array length : ${this.arr.length}`)
                }
        }
}

const fruits = new Fruits()
fruits.setItemsTable(0,5)
fruits.toogleDisplayDiv()

output 是

[ 'banana', 'grape', 'Orange', 'Apple', 'guava' ]
Array length : 5
[
  'banana', 'grape',
  'Orange', 'Apple',
  'guava',  'pineapple',
  'mango',  'watermelon',
  'melon',  'tangerine',
  'lemon',  'Strawberry'
]
Array length : 12