Question

我有一个<p>，其中包含用*ngIf生成的文本（数据来自后端）。 我要根据文本长度更改文本大小。我尝试在<p>的帮助下导入@ViewChild 来操纵元素，但它给了我undefined。

任何建议将不胜感激。

HTML

 <section class="movies-container">
        <div class="movies-container__box" *ngFor="let m of movies">
            <img class="movies-container__box__img" src="{{m.movieImg}}" alt="">
            <p #movieName  class="movies-container__box__title" >{{m.movieName}} 
            </p>
            <a class="user-button">View Details</a>
        </div>
 </section>

Ts

export class UserInterfaceComponent implements OnInit {
  @ViewChild ('movieName' , {read: ElementRef}) movieName: ElementRef;


  private movieListSub: Subscription;
  private movies: UserMovie[] = []


  constructor( private movieService: UserMovieService,
               private myElement: ElementRef ) { }


  ngOnInit() {
    this.movieListSub = this.movieService.getUpdatedMovieList().subscribe(response => {
      this.movies = response.userMovieList;
    })
    console.log(this.movieName)
  }

Answer 1

您可以通过为<p>赋予主题标签#myTxt来完成DOM内部的所有操作。之后，您可以在DOM中调用它。将[ngStyle]属性添加到<p>元素，并通过获取myTxt.innerHTML.length

评估其值。

[ngStyle]="{'font-size': myTxt.innerHTML.length+'px'}"

这应该根据文本的长度缩放文本。

请记住，通常应避免使用DOM-logic，但如有必要，请使其尽可能短而容易。

根据文本长度在<p>中更改“字体大小”-Angular 6

1 个答案: