据我所知，您的任务包括以下子任务：

• 分割给定的序列号，使第二个部件是唯一的。
• 按结尾升序对序列号进行排序。
• 显示序列号，并在鼠标悬停时突出显示其唯一的结尾。

我认为这可以通过以下解决方案来实现：
首先是main-logic，重点关注确定在何处拆分序列号的递归方法：

serialNumbersRaw = ['SNM1A892P4JRI3LKI1701205001002ANKSC', 'SNM1A892P4JRI3LKI17012050010026ANKSC',
                        'A8909880890078', 'B8909880290078', 'A8909880490078', 'C8901880490078',
                        'C8909880895078', 'D8909880190078' ];
    
    serialNumbersDtos: SerialNumberDto[] = [];

    ngOnInit(): void {
        // Initialize serial-number dtos:
        this.serialNumbersDtos = this.serialNumbersRaw.map(n => ({ fullSN: n } as SerialNumberDto));
        const defaultNumbOfDigitsToCut = 5;
        // Determine unique-endings:        
        this.prepareSerialNumberDtosRec(this.serialNumbersDtos, defaultNumbOfDigitsToCut);
        // Sort serial-numbers ascending:
        this.serialNumbersDtos = this.serialNumbersDtos.sort((sn1, sn2) => sn1.endsWith < sn2.endsWith ? -1 : 1);
    }

    private prepareSerialNumberDtosRec(snDtos: SerialNumberDto[], numbOfDigitsToCut: number) {

        // Split serial-number into two pieces:
        this.modifyDtos(snDtos, numbOfDigitsToCut);

        // If the beginning of a serial-number is an empty string, you shouldn't cut any further:
        if (snDtos.some(sn => sn.startsWith.length === 0)) {
            return;
        }

        // Create an array of sub-arrays, where all elements of a sub-array have the same 'endsWith' value:
        const groupedSnDtos = Object.values(
            snDtos.reduce<{ [index: string]: SerialNumberDto[] }>(
                (group, sn) => ((group[sn.endsWith] || (group[sn.endsWith] = [])).push(sn), group), {}
            )
        );

        // Remove unique dtos and thereby exclude them from further processing:
        const nonUniqueSnDtos = groupedSnDtos.filter(group => group.length > 1);

        // Check if there are still objects, with non-unique endings:
        if(!nonUniqueSnDtos.length) {
            return;
        }

        // Process remaining objects with non-unique endings:
        nonUniqueSnDtos.forEach(snWithCommonEndings => {
            this.prepareSerialNumberDtosRec(snWithCommonEndings, (1 + numbOfDigitsToCut));
        });
    }

    /* Adapt the beginning and the ending of the serial-number */
    private modifyDtos(snDtos: SerialNumberDto[], numbOfDigitsToCut: number) {
        snDtos.forEach(dto => {
            if (dto.fullSN.length >= numbOfDigitsToCut) {
                dto.endsWith = dto.fullSN.substring(dto.fullSN.length - numbOfDigitsToCut);
                dto.startsWith = dto.fullSN.substring(0, dto.fullSN.length - dto.endsWith.length);
            }
        });
    }

然后是dto级：

class SerialNumberDto {
    fullSN: string = '';
    startsWith: string = '';
    endsWith: string = '';
    displayChip: boolean = false;
}

html部分：

<div *ngFor="let dto of serialNumbersDtos"
    (mouseover)="dto.displayChip=true"
    (mouseout)="dto.displayChip=false">

    {{ dto.startsWith }}<span [ngClass]="{ 'chip': dto.displayChip }">{{ dto.endsWith }}</span>

</div>

最后是CSS：

.chip {
    border: 1px solid black;
    border-radius: 20px;
    background-color: rgba(0, 0, 255, 0.1);
    cursor: default;
}