首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如果两个字符串在表角13中匹配,则增量字符串为一个。

如果两个字符串在表角13中匹配,则增量字符串为一个。
EN

Stack Overflow用户
提问于 2022-11-23 09:11:39
回答 1查看 53关注 0票数 -1

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

总是用省略号在字符串中显示最后5个字母,但例如,如果第一行的序列号为SNM1A892P4JRI3LKI1701205001002ANKSC,第二行的序列号为SNM1A892P4JRI3LKI17012050010026ANKSC,则递增字符串一个显示最后6个字母,如果最后6个字母为diff,则显示最后7个字母,直到序列号唯一为止。opt:.....2ANKSC位于第一行,....6ANKSC位于表的第二行。

有人能指导如何用角度来写逻辑吗?

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

EN

回答 1

Stack Overflow用户

发布于 2022-11-23 20:08:02

据我所知,您的任务由以下子任务组成:

  • 对给定的序列号进行拆分,使得第二部分是唯一的。
  • 按顺序对序列号进行排序。
  • 显示序列号,并在鼠标上方突出显示它们的唯一结尾。

我认为可以通过以下解决办法实现这一点:

首先,主逻辑,重点讨论确定在何处拆分序列号的递归方法:

代码语言:javascript
复制
    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类

代码语言:javascript
复制
class SerialNumberDto {
    fullSN: string = '';
    startsWith: string = '';
    endsWith: string = '';
    displayChip: boolean = false;
}

html部分

代码语言:javascript
复制
<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

代码语言:javascript
复制
.chip {
    border: 1px solid black;
    border-radius: 20px;
    background-color: rgba(0, 0, 255, 0.1);
    cursor: default;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/74544244

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档