如果在Angular 13中匹配了两个字符串，则将字符串加1

Question

我有一个要求，在表中第一列是序列号数组。我需要比较这个列在一个表中，如果两行有相同的最后一个数字/序列号:显示最后6位数字(增加数字的数量，直到序列号是唯一的)，并以省略号文本的形式显示它。

总是用省略号but显示字符串的最后5个字母例如，如果第一行序列号是SNM1A892P4JRI3LKI1701205001002ANKSC，第二行是SNM1A892P4JRI3LKI17012050010026ANKSC，那么将字符串增加一个显示最后6个字母，如果最后6个字母是不同的，那么显示最后7个字母，直到序列号是唯一的。选择:…2ANKSC在第一排和....6ANKSC在表的第二行

谁能指导一下如何在angular中编写这个逻辑?

我有想法，但如何增加字符串，并在字符串的悬停上以椭圆的形式显示它，这部分我落后了。

Answer 1

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

• 拆分给定的序列号，使第二部分唯一。
• 按序列号的结尾按升序排序。
• 显示序列号，并在鼠标悬停时突出显示序列号的唯一结尾。

我认为这可以通过以下解决方案实现:

首先主逻辑，重点介绍确定在何处分割序列号的递归方法:

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);
}
});
}

然后转到class:

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

html part:

<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;
}