要按属性名称分组并且只显示唯一值，可以使用Angular的管道和数组方法来实现。以下是一个示例解决方法：

首先，创建一个名为uniqueByProperty的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'uniqueByProperty'
})
export class UniqueByPropertyPipe implements PipeTransform {
  transform(value: any[], property: string): any[] {
    const uniqueValues = [];
    const uniqueObjects = [];

    value.forEach(item => {
      const propertyValue = item[property];
      if (!uniqueValues.includes(propertyValue)) {
        uniqueValues.push(propertyValue);
        uniqueObjects.push(item);
      }
    });

    return uniqueObjects;
  }
}

然后，在需要使用该管道的组件中，将其声明为依赖并使用它：

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    

      {{ item.propertyName }}
    
  `
})
export class ExampleComponent {
  items = [
    { propertyName: 'A', value: 1 },
    { propertyName: 'B', value: 2 },
    { propertyName: 'A', value: 3 },
    { propertyName: 'C', value: 4 },
    { propertyName: 'B', value: 5 }
  ];
}

在上述示例中，items数组中的对象按propertyName属性进行分组，并且只显示每个组中的第一个对象。

最后，确保将UniqueByPropertyPipe添加到模块的providers数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { UniqueByPropertyPipe } from './unique-by-property.pipe';
import { ExampleComponent } from './example.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [UniqueByPropertyPipe, ExampleComponent],
  bootstrap: [ExampleComponent]
})
export class AppModule {}

通过以上步骤，您将能够按属性名称分组并且只显示唯一值的结果。