Question

我正在使用一组对象在 ngFor 中使用它。问题是在使用必须具有的顺序创建数组之后，javascript改变了顺序。

当我在console.log之前设置断点时，我正在工作的数组的顺序是下一个：

当我对数组执行console.log时，它会将位置8的元素更改为位置0，这就是 ngFor 所需的顺序

构造数组的代码是下一个：

this.recommendations.forEach(recommendation => {
        recommendation.Journeys.forEach(function (journey, indexJour) {
            journey.Segments.forEach(function (segment, indexSeg) {
                segment.Flights.forEach(function (flight, index) {
                    const newFlight: FlightAvailabityByPrice = {
                        journeyId : journey.JourneyId,
                        segmentId : segment.SegmentId,
                        company : segment.ValidatingCarrier,
                        system : segment.SourceCode,
                        flight : flight.FlightNumber,
                        departure : flight.DepartureDateTime,
                        arrival: flight.ArrivalDateTime,
                        flightNumber : flight.AircraftType,
                        stops : segment.Flights.length - 1,
                        baggage : (flight.FareOption.BaggageAllowance || '0P') + (flight.FareOption.BaggageWeight || '23K'),
                        base : flight.FareOption.FareBase + ' ' + flight.FareOption.Class,
                        cabin : flight.ClassOfServices[0].CabinType
                    };

                    if (!(journey.JourneyId in newGroup)) {
                        newGroup[journey.JourneyId] = {index: tempFlights.length};
                    }

                    tempFlights.push(newFlight);
                });
            });
        });

        const newRecommendation: RecommendationList = {
            flights : tempFlights
        };
        tempFlights = [];
        tempRecommendation.push(newRecommendation);
        tempGroups.push(newGroup);
        newGroup = {};
    });
    this.rowGroups = tempGroups;
    this.flightsInfo = tempRecommendation;

html为body提供了PrimeNG的表组件，它是下一个

<ng-template pTemplate="body" let-recoInfo let-index="rowIndex">
                            <tr class="ui-widget-header" *ngIf="rowGroups[i][recoInfo.journeyId].index === index">
                                <td colspan="14">
                                    <i class="fa fa-plane" [ngClass]="{'departure': recoInfo.journeyId === 1, 'arrival': recoInfo.journeyId !== 1}"></i>
                                    <span style="font-weight:bold">{{recoInfo.journeyId === 1 ? 'SELECT_DEPARTURE' : 'SELECT_ARRIVAL'}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <mz-checkbox-container>
                                        <input mz-checkbox
                                            id="select-all-{{i}}-{{index}}"
                                            type="checkbox">
                                    </mz-checkbox-container>
                                </td>
                                <td>
                                    <img src="assets/images/flight_companies/{{recoInfo.company}}.png" alt="{{recoInfo.company}}">
                                </td>
                                <td>{{recoInfo.system}}</td>
                                <td>{{recoInfo.flight}}</td>
                                <td>{{recoInfo.departure}}</td>
                                <td>{{recoInfo.departure}}</td>
                                <td>{{recoInfo.flightNumber}}</td>
                                <td>{{recoInfo.stops}}</td>
                                <td></td>
                                <td>
                                    <img src="assets/images/malas/{{recoInfo.baggage}}.png" alt="{{recoInfo.baggage}}">
                                </td>
                                <td>{{recoInfo.base}}</td>
                                <td>{{recoInfo.cabin}}</td>
                                <td></td>
                                <td>
                                    <mz-radio-button-container>
                                        <input mz-radio-button
                                            [withGap]="true"
                                            id="flight-{{i}}-{{index}}"
                                            name="selected-{{recoInfo.journeyId === 1 ? 'departure' : 'arrival'}}-{{i}}"
                                            type="radio">
                                    </mz-radio-button-container>
                                </td>
                            </tr>
                        </ng-template>

感谢任何帮助！

Answer 1

嗯，当你将所有嵌套循环分成子程序时，它使得逻辑更容易推理FYI ..但是如果只是为了在重构之前完成事情，我可能会使用该segmentId排序到一个新数组或改变原来的

 tempFlights.sort(function (a, b) {
 return a.segmentId - b.segmentId;
 })

Here's我从中得到了它，只是实际的文档

希望这对你有用，祝你好运！

TypeScript在赋值后改变了数组的顺序

1 个答案: