我认为在组件上保持状态是最简单的，如果原始数据是硬编码的，并且不需要从服务器获取或保存到服务器上。
我建议查看辛烷教程来更深入地学习这些模式。你可以访问它here。

在辛烷组件中存储阵列状态：

首先，我们将数组数据放入跟踪的属性中，并编写一个可以修改该数据的操作：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked items = [
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
  ];

  @action
  editItem(item) {
    this.items[0][0] = item // make some changes

    // The line below is important when working with tracked arrays and objects. Always "reset" the array whenever you make changes. This tells Ember to update what is rendered.
    this.items = this.items;
  }
}

我们使用each辅助器迭代该二维数组。

<table class="quantize" style="width: 80%">
        {{#each this.items as |row|}}
        <tr class="">
            {{#each row as |cell|}} 
                    <td
                     class="border border-dark"
                     style="width:10%">
                        {{cell}}                        
                    </td>           
            {{/each}}
        </tr>
        {{/each}}
    </table>

保持路径模型中的状态

如果你想把数组数据放到路由的model钩子中，你也可以这样做。然而，model主要是在你从API中获取数据时使用的。优点是Ember可以为你处理一些异步获取和渲染，Octane组件只允许对它“拥有”的数据进行更改。如果需要对从父组件或路由传入的数据进行更改，则必须通过调用同样传入的函数来完成。这称为“单向绑定”。
首先，我们从路由的模型钩子返回数据：
第一个
我们将模型数据和editItems操作传递给显示表的组件：

<!-- templates/my-route.hbs -->
<MyComponent @items={{this.model}} @editItems={{action "editItems"}} />

在我们的组件中，我们将这些项称为@items，而不是this.items。当数据来自外部时（如父路由或组件），将使用@。

<!-- my-component.hbs -->
    <table class="quantize" style="width: 80%">
        {{#each @items as |row|}}
        <tr class="">
            {{#each row as |cell|}} 
                    <td
                     class="border border-dark"
                     style="width:10%">
                        {{cell}}                        
                    </td>           
            {{/each}}
        </tr>
        {{/each}}
    </table>

然后，当您要对数组进行更改时，必须调用传入的editItems函数。它可以作为this.args.editItems使用。this.args是从父组件传入组件的任何内容。

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponent extends Component {

  @action
  buttonWasClicked(item) {
    this.args.editItems(item)
  }
}

或者，您可以直接在模板中使用传入的操作，并将您要更改的项传递给它。

<!-- my-component.hbs -->

<button {{on "click" (fn @editItems item)}}>edit item</button>