Как отображать элементы в матричном виде в Angular без тегов tr и td

#html #css #angular #typescript

#HTML #css #angular #typescript

Вопрос:

На этот раз у меня другое требование. У меня есть массив объектов, и он является 2D, вызывается staticKpi , а структура объекта:

 {
  kpi: string;
  headerString: string;
  footerString: string;
}

Каждый объект представляет один жизненно важный признак тела, такой как Spo2, BP и т. Д. Все ключевые показатели эффективности должны отображаться так, как я добавляю их в структуру массива. Как показано ниже, это 2 строки и 3 столбца:

 this.staticKpi.push(
      [
        {
          kpi: "SpO2",
          headerString: "High: 97 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "Temperature",
          headerString: "High: 100.4 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "BP",
          headerString: "High: 140/90 ",
          footerString: "Low: 90/60"
        }
      ],
      [
        {
          kpi: "Respiratoin",
          headerString: "High: 25 per min",
          footerString: "Low: 10 per min"
        },
        {
          kpi: "Pulse rate",
          headerString: "High: 100 and above",
          footerString: "Low: 50 and below"
        },
        {
          kpi: "D-Dimer",
          headerString: "Negative: 0.50 and Less",
          footerString: "Positive: Greater than 0.50"
        }
      ]
    );

Вот шаблон:

 <div>
    <div *ngFor="let row of staticKpi">
        <div *ngFor="let widget of row">
            <div> <!--this makes one complete kpi -->
                <h3>{{widget.headerString}}</h3>
                <h2>{{widget.kpi}}</h2>
                <h3>{{widget.footerString}}</h3>
            </div>
        </div>
    </div>
</div>

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

Мне сказали не использовать теги таблиц любой ценой. Пожалуйста, помогите мне добиться этого с помощью циклов и css (если таковые имеются). Спасибо.

PS: Пожалуйста, не стесняйтесь предлагать редактировать / модифицировать код.

1. С помощью css у вас есть flex, grid или column-count. Вы пробовали какие-нибудь?

2. Я пробовал только flex. Но я не получаю желаемого результата. Я не знаю, была ли моя реализация неправильной. Можете ли вы pz разобраться в этом.

Ответ №1:

Используйте следующие правила css и примените их к внутреннему div.

 .rows {
   border: 1px solid black;
   display: inline-block;
   width: 33.33%;
   box-sizing: border-box;
}

в шаблоне

 <div>
    <div *ngFor="let row of staticKpi">
        <div *ngFor="let widget of row" class="rows">   // <-- style applied here
            <div>
                <h3>{{widget.headerString}}</h3>
                <h2>{{widget.kpi}}</h2>
                <h3>{{widget.footerString}}</h3>
            </div>
        </div>
    </div>
</div>

Ответ №2:

Из вашего фактического stackblitz вы также можете добавить это в свой css

 .col-4 {
  display:grid; 
  grid-template-columns:repeat(3,1fr);
  /* extra for the demo/fun */
  grid-gap:0.5em;
  align-items:center;
  border-top:solid ;
  box-shadow:0 3px;
  background:linear-gradient(to left,transparent 0  34%,gray 34% 67%, transparent 67% 100%);
  }

tpl, связанный с :

 <hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<div>
    <div *ngFor="let row of staticKpi">
        <div class="content-row" *ngFor="let widget of row">
            <div class="col-4">
                <h3>{{widget.headerString}}</h3>
                <h2>{{widget.kpi}}</h2>
                <h3>{{widget.footerString}}</h3>
            </div>
        </div>
    </div>
</div>