我有一个要求,在表中,第一列是序列号数组。如果两行具有相同的最后数字/序列号,则需要比较表中的这一列:显示最后6位数字(增加数字数直到序列号是唯一的),并以椭圆文本的形式显示。
总是用省略号在字符串中显示最后5个字母,但例如,如果第一行的序列号为SNM1A892P4JRI3LKI1701205001002ANKSC,第二行的序列号为SNM1A892P4JRI3LKI17012050010026ANKSC,则递增字符串一个显示最后6个字母,如果最后6个字母为diff,则显示最后7个字母,直到序列号唯一为止。opt:.....2ANKSC位于第一行,....6ANKSC位于表的第二行。
有人能指导如何用角度来写逻辑吗?
我有想法,但是如何增加字符串,并以椭圆的形式显示在字符串的悬停上,这部分我落后了。
发布于 2022-11-23 20:08:02
据我所知,您的任务由以下子任务组成:
。
我认为可以通过以下解决办法实现这一点:
首先,主逻辑,重点讨论确定在何处拆分序列号的递归方法:
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;
}https://stackoverflow.com/questions/74544244
复制相似问题