Question

我有以下代码：

        <mat-form-field>
            <mat-label>Element Parent:</mat-label>
            <input type="text" matInput 
            (input)="getHierarchyService.filterFlatHierarchy($event)"
                [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete"
                [displayWith]="displayLabel">
                <mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
                    *ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
                    [value]="option">
                        {{returnSemiStringPath(option.Path)}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>

函数returnSemiStringPath从输入中返回一个缩短的字符串：

returnSemiStringPath(path: string) {
    let newPathArray = path.split('/')
    return `${newPathArray[0]}/${newPathArray[1]}.....
   ${newPathArray[newPathArray.length-1]}/${newPathArray[newPathArray.length-2]}`
}

我想在新字符串的第一部分和最后部分添加样式（添加颜色）。

我想只是从ts文件中“创建” html元素，并使用所需样式从此函数中添加它们。但我不知道如何实现这一目标。

*我知道此功能，因为它可能是一个不好的做法，在将其工作后，我会将其转换为有角管道以提高效率。

谢谢大家的帮助！

Answer 1

我认为这段代码可以为您提供帮助：

.ts

    struct student
    {
      char name[50], number[13], gender[6], program[50], age[3], email[100];
      int roll;
    } s[10];

    main();

    int i, n;

    printf("Enter how many students to add:\n");
    scanf("%s", &n);

    // storing information
    i = 0;
    for (i; i < n; ++i)
    {
        s[i].roll = i + 1;

        printf("\nFor roll number%d\n", s[i].roll);   //number of the student

        printf("Enter name: \n");
        scanf("%s", s[i].name);

        printf("Enter personal number (yyyymmdd-xxxx):\n");
        scanf("%s", &s[i].number);

        printf("Enter gender (male or female):\n");
        scanf("%s", &s[i].gender);

        printf("Enter program of student: \n");
        scanf("%s", &s[i].program);

        printf("Enter age of student: \n");
        scanf("%s", &s[i].age);

        printf("Enter email of student: \n");
        scanf("%s", &s[i].email);

        printf("\n");
    }

    printf("Displaying Information:\n");

.html

returnSemiStringPath(path: string) {
    const newPathArray = path.split('/');

    return newPathArray;
}

如果需要的话，可以在* ngFor中更改div块以覆盖并删除英雄所在的跨度。

.css

<div class="hero">
  <div *ngFor="let hero of returnSemiStringPath('https://stackoverflow.com/questions/53997450/how-to-add-style-to-a-string-returned-from-a-function-called-from-the-html-file')">
    <span>{{hero}}</span>
  </div>
</div>

Answer 2

根据我的理解，您想在返回的字符串的第一部分和最后一部分添加颜色。像这样的用户Angular HTML绑定。

                <mat-option class="mat-option-height" (click)="GetHierarchyLevel()"
                *ngFor="let option of getHierarchyService.filteredHierarchyFlatData"
                [value]="option">
                    <span [innerHTML]="returnSemiStringPath(option.Path)"></span>
            </mat-option>

returnSemStringPath函数将像这样修改

returnSemiStringPath(path: string) {
let newPathArray = path.split('/')
return `<span class='redcolor'>${newPathArray[0]}</span>/${newPathArray[1]}.....
   ${newPathArray[newPathArray.length-1]}/<span class='bluecolor'>${newPathArray[newPathArray.length-2]}</span>`}

组件装饰器看起来像这样。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
styles: ['.redcolor { color: red; }', '.bluecolor{color:blue;}'],
  encapsulation: ViewEncapsulation.None,
})

感谢。

如何在从html文件调用的函数返回的字符串中添加样式

2 个答案: