Angular 角度-组件数据绑定第二次不工作

我在修复第二个

应用程序订单列表部分的数据绑定不起作用的错误时遇到问题

以下是父应用程序订单列表的.html文件

：

<div class="list-container">
    <label class="list-header" *ngIf="filteredSlotsOrders.length > 0" style="margin-top: 1.625rem;">DELIVERY SLOTS ORDERS</label>
    <div style="height: 50vh; overflow-y: scroll;" *ngIf="filteredSlotsOrders.length > 0">
        <div *ngFor="let date of timelinesWithSlots">
            <app-orders-list-section
                [slotsOrders]="filteredSlotsOrders"
                [timeline]="date"
                [isDeliverySlotsActive]="true"
                [searchTerm]="searchTerm"
            ></app-orders-list-section>
        </div>
    </div>
</div>
<div class="list-container">
    <label class="list-header" *ngIf="filteredNoSlotsOrders.length > 0" style="margin-top: 2.438rem;">ORDERS WITHOUT SLOTS</label>
    <div style="height: 50vh; overflow-y: scroll;" *ngIf="filteredNoSlotsOrders.length > 0">
        <div *ngFor="let date of timelinesWithNoSlots">
            <app-orders-list-section
                [noSlotsOrders]="filteredNoSlotsOrders"
                [timeline]="date"
                [isDeliverySlotsActive]="false"
                [searchTerm]="searchTerm"
            ></app-orders-list-section>
        </div>
    </div>
</div>

@Component({
    selector: 'app-orders-list',
    templateUrl: './orders-list.component.html',
    styleUrls: ['./orders-list.component.css'],
})
export class OrdersListComponent implements OnChanges{
    
    @Input() ordersWithSlots: Order[] = [];
    @Input() ordersWithNoSlots: Order[] = [];
    @Input() timelinesWithSlots: string[] = [];
    @Input() timelinesWithNoSlots: string[] = [];
    @Input() isDeliverySlotsActive: boolean;
    @Input() searchTerm: string;
    filteredSlotsOrders: Order[] = [];
    filteredNoSlotsOrders: Order[] = []

    ngOnChanges(changes: SimpleChanges): void {
        // keep orders updated on changes
        if(changes.ordersWithSlots){
            if(changes.ordersWithSlots.currentValue != changes.ordersWithSlots.previousValue){
                this.filteredSlotsOrders = this.ordersWithSlots;
            }
        }
        if(changes.ordersWithNoSlots){
            if(changes.ordersWithNoSlots.currentValue != changes.ordersWithNoSlots.previousValue){
                this.filteredNoSlotsOrders = this.ordersWithNoSlots;
            }
        }
        ...
        ...
    }
    ...

数据来自智能组件，

应用程序订单列表的父级。它是数据流开始的地方，设置如下，在
ngOnInit（）
：

对于smart component.html：

 <app-orders-list
     [ordersWithSlots]="loadedSlotsPendingOrders"
     [ordersWithNoSlots]="loadedNoSlotsPendingOrders"
     [timelinesWithSlots]="pendingSlotsOrderTimelines"
     [timelinesWithNoSlots]="pendingNoSlotsOrderTimelines"
     [isDeliverySlotsActive]="isDeliverySlotsActive"
     [searchTerm]="searchTerm"
></app-orders-list>

为什么会检测到
slotsOrders
（我可以打印数据）的更改，而没有检测到
noSlotsOrders
？即使我尝试打印
isDeliverySlotsActive
，结果也将始终为真，即使对于第二个容器，我希望此字段设置为
false

提前谢谢你。
我想我对为什么会发生这种情况有一个很好的猜测。只有当
filteredNoSlotsOrders
在父组件的内存中被分配了一个新位置时，才会发生更改，我打赌这不会发生。为了检测阵列和对象类型的角度变化，它们必须在内存中有一个新位置

而不是：

const newOrder = {};
this.filteredNoSlotsOrders.push(newOrder);

做：

从阵列中删除数据时，请使用
filter
。本质上，每次
filteredNoSlotsOrders
更改时，都要对其进行不变的更改（将其分配给内存中新位置的新数组）

如果您可以在每次
filteredNoSlotsOrders
更改时显示父组件，我可以帮助您不变地执行此操作。
Hi！谢谢你的回复。您可能了解到了一些事情，因为我确实在数据流开始的智能组件中使用了
push（）
。我同时更新了我的问题！我想我的问题是，为什么检测到第一个数组
filteredNoSlotsOrders
，而
filteredNoSlotsOrders
没有？这两种方式的流程不是都一样吗？你确定这条线在运行吗<代码>this.filteredNoSlotsOrders=this.orderswithnoslot。是的。我试过打印，结果打了两次电话。第一个打印是空的，而第二个打印显示的是订单。我可能已经找到了错误的来源
this.pendingNoSlotsOrderTimelines
在智能组件上打印为空，而智能组件内部应该有数据。此数组包含订单的每个分组/部分的时间线。沿着这一行，我检查每个部分是否有一个订单对应于该部分的时间线。当然，如果没有与订单关联的时间线，则不会显示该时间线。如果这真的是原因，我会告诉你的。同时，我是否确实需要将每个
Input（）
数据保存在组件中一个新的单独字段中，并向下传递这个新字段？
@Input() timeline: string;
@Input() slotsOrders: Order[] = [];
@Input() noSlotsOrders: Order[] = [];
@Input() isDeliverySlotsActive: boolean;
@Input() searchTerm: string;
sectionOrders: Order[] = [];

constructor(private datePipe: DatePipe) {}

ngOnInit(): void {
    this.createSectionOrders();
    this.sortOrders();
}

ngOnChanges(changes: SimpleChanges): void {
    console.log(this.isDeliverySlotsActive) // prints always true
    if(changes.slotsOrders){
        console.log("hello") // this prints!
        if(changes.slotsOrders.currentValue != changes.slotsOrders.previousValue){
            this.createSectionOrders();
            this.sortOrders();
        }
    }
    if(changes.noSlotsOrders){
        console.log("hello") // this doesn't print!
        if(changes.noSlotsOrders.currentValue != changes.noSlotsOrders.previousValue){
            this.createSectionOrders();
            this.sortOrders();
        }
    }
}
...

const newOrder = {};
this.filteredNoSlotsOrders.push(newOrder);

const newOrder = {};
this.filteredNoSlotsOrders = [...this.filteredNoSlotsOrders, newOrder];