Проблема с привязкой свойств в Angular через массив

Question

Я хотел отобразить три карты с заданным содержимым в массиве с помощью интерполяции строк. А также установите свойство стиля указанной c карты в соответствии с заданной строкой в ​​массиве.

Но у меня возникла проблема с установкой свойства стиля для моей карты. Проблема заключается в том, что всякий раз, когда я пытаюсь установить стиль с помощью строковой интерполяции, мое представление просто отображается пустым.

 <div class="row-sm-2" *ngFor="let post of classifications">
     <mat-card style={{ post.margin }}>
         <p style="color: #62697D;">{{ post.content }}</p>
     </mat-card>
 </div>

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  classifications = [
    {margin: '0px; width: 100%', content: 'Hello there'},
    {margin: '20px; width: 100%', content: 'Hi there'},
    {margin: '20px; width: 100%', content: 'Well its angular'}
  ];

}

Answer 1

Во-первых, вам не хватает кавычек, <mat-card style="{{ post.margin }}">

Во-вторых, это приведет к разметке Rubi sh, например

<mat-card style="0px; width: 100%">, что недопустимо - 0 пикселей чего?

используйте ngStyle для динамической установки стиля элемента.

Answer 2

Либо заключите его в кавычки, либо привяжите к [style]. Также было бы лучше структурировать данные следующим образом и обращаться к стилям, используя post.style вместо post.margin.

classifications = [
  {style: 'margin: 0px, width: 100%', content: 'Hello there'},
  {style: 'margin: 20px, width: 100%', content: 'Hi there'},
  {style: 'margin: 20px, width: 100%', content: 'Well its angular'}
];

<div class="row-sm-2" *ngFor="let post of classifications">
  <mat-card style="{{ post.style }}">
    <p style="color: #62697D;">{{ post.content }}</p>
  </mat-card>
</div>

или

<div class="row-sm-2" *ngFor="let post of classifications">
  <mat-card [style]="post.style">
    <p style="color: #62697D;">{{ post.content }}</p>
  </mat-card>
</div>

Answer 3

<div class="row-sm-2" *ngFor="let post of classifications">
    <mat-card [style]= 'post.margin'>
        <p style="color: #62697D;">{{ post.content }}</p>
    </mat-card>
</div>

Проблема заключалась в том, что я выполнял интерполяцию строк, вместо этого я хотел сделать привязку свойств, все, что мне нужно сделать, это удалить фигурные скобки