如何使用 Angular 的 *ngFor 内联显示项目

Question

我正在尝试内联显示项目，而不是出现在不同的行中。 请看下面的代码和图片。 我试图在网上寻找解决方案，但其他人都在问不同的用例。 请告诉我。 谢谢！

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
    <div>
        <div class="pimg1">
           <div class="ptext">
               <span class="borderStyle">
                   Kenny's Site
               </span>
           </div>
        </div>
        <section class="section section-light">
            <h2>Skills</h2>
            <p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
        </section>
        <div class="pimg2">
           <div class="ptext">
               <span class="borderStyle">
                   Image2 Text
               </span>
           </div>
        </div>
        <section class="section section-dark">
           <h2>Section 1</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
       </section>
       <div class="pimg3">
           <div class="ptext">
               <span class="borderStyle">
                   Image3 Text
               </span>
           </div>
        </div>
        <section class="section section-dark">
           <h2>Section 3</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
       </section>
       <div class="pimg1">
           <div class="ptext">
               <span class="borderStyle">
                   Kenny's Site
               </span>
           </div>
        </div>
    </div>
 </body>
 </html>

Answer 1

我认为这不是 angular 问题案例。 您需要管理 css 以使技能以 flex 或 grid 显示。

也许你可以尝试在一个 div 容器中制作所有技能，然后灵活运用它们。

html：

<section class="section section-light">
      <h2>Skills</h2>
      <div class="skill-list">
         <p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
      </div>
 </section>

css：

.skill-list{
     display : flex;
     justify-content: between;
}

Answer 2

您可以在此处使用 css flexbox 模式。尝试将 class 添加到您的<p>标签并为它们提供以下属性

.<your class name> {
  display: flex;
  flex-wrap: nowrap;
}

Answer 3

    if you don't want to mess around that much with CSS attributes you should have a look at [@angular/flex-layout][1]


          [1]: https://github.com/angular/flex-layout

        1. Rows made like this: 
        <div fxLayout="row wrap">
          <div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="start center">

          </div>
          <div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="end center">

          </div>
        </div>

        2. Columns made like this:

        <div fxLayout="column wrap">
          <div fxFlex="50%" fxLayoutAlign="start center">

          </div>
          <div fxFlex="50%" fxLayoutAlign="end center">

          </div>
        </div>


    [fxFlex.lt-md] makes the styling responsive, depending on your current user's viewport. There are *.lt-sm, *.lt-md and also *.gt-sm and so on...

And you may use on any flexLayout directives like "fxLayoutAlign" and others...

如何使用 Angular 的 *ngFor 内联显示项目

问题描述

3 个解决方案

解决方案1
4 已采纳 2020-05-30 19:09:55

解决方案2
0 2020-05-30 19:10:36

解决方案3
0 2020-05-30 20:20:44

如何使用 Angular 的 *ngFor 内联显示项目

问题描述

3 个解决方案

解决方案1 4 已采纳 2020-05-30 19:09:55

解决方案2 0 2020-05-30 19:10:36

解决方案3 0 2020-05-30 20:20:44

解决方案1
4 已采纳 2020-05-30 19:09:55

解决方案2
0 2020-05-30 19:10:36

解决方案3
0 2020-05-30 20:20:44