Question

我正在使用Angular8，并具有ngFor来显示一组人。

这是数组

private myArray: {}[] =
    [
        {
            "name": "name1",
            "description": "description goes here",
        },
        {
            "serviceName": "name2",
            "description": "description goes here",
        }
    ]

这是HTML

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

我有一个foreach循环，该循环遍历数组并将isName1更改为true（如果它是数组中的第一个）。

this.myArray.forEach(s => {

  if(name === 'name1') {
    this.isName1 = true;
  }
});

我想做的是让ul仅显示第一个元素，而不显示第二个元素，但同时显示两个元素。有什么办法可以做到这一点？谢谢

Answer 1

考虑使用ng-template

使用的好处是它不会以HTML形式显示（作为内联或块元素）。

示例代码：

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul>
    <ng-template [ngIf]="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
      </ng-template>
      <ng-template [ngIf]="!isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
      </ng-template>
    </ul>
</div>

Answer 2

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="details.name === 'name1'">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

Answer 3

据我所知，您想限制ngfor中的项目，这是重要链接

How can I limit ngFor repeat to some number of items in Angular?

因此您的代码将类似于

<ng-container *ngFor="let details of myArray;let i=index" >
<div class="content" *ngIf="i==0">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul >
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>
</ng-container>

Answer 4

如果您始终总是将条件应用于第一个元素，尽管有值，也可以使用first，它由*ngFor中的angular提供。因此，就不需要使用forEach循环了：

<div class="content" *ngFor="let details of myArray; let first = first">
  <h2>{{details.name}}</h2>
  <div class="description">{{details.description}}</div>

  <ul *ngIf="first">
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item1</span>
    </li>
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item2</span>
    </li>
  </ul>
</div>

STACKBLITZ

Answer 5

将connect(m_conditionA, &Condition::flagChanged, this, &State::checkAllConditions)更改为class Home extends Component { constructor(props) { super(props); let notes = getLocalItem(keys.listOfItems); if (!notes) {notes=[];} this.state = { title: '', content: '', notes: notes } } // function to go to edit note page, but opening the relevant note to edit editNoteClicked(clickedValue) { setLocalItem(keys.noteToEdit, clickedValue); this.props.history.push('/editnote'); } deleteNoteClicked(clickedValue) { let copyOfNotes = [this.state.notes]; // make a separate copy of the array delete copyOfNotes[clickedValue]; // delete item in array this.setState({ notes: copyOfNotes }, setLocalItem(keys.listOfItems, copyOfNotes)); // //refresh page here } renderRows() { let rows = []; for (let i = 0; i < this.state.notes.length; i++) { let currentNote = this.state.notes[i]; rows.push( <div>{currentNote.title} - {currentNote.content} <button className="btn" onClick={() => this.editNoteClicked(i)}>EDIT</button> <button className="btn" onClick={() => this.deleteNoteClicked(i)}>DELETE</button> </div> ); } return rows; }

s.name

尝试这样：

if(name === 'name1')

ngIf仅在ngFor中的一个部分列出

5 个答案: