Question

我正在使用Angular7从Laravel API获取端点。我将结果显示在Angular的表上。一个名为is_subscribe（Subscribe）的特定字段是1或0。我不知道如何将1更改为True，将0更改为False

我已经编写了service.ts，component.ts和component.html，并且一切正常。

model.ts

export class Cloudsubscriptions {

    constructor(
      public _id: number = 0,
      public msisdn: string,
      public is_subscribe: number,
      public package_id: number,
      public transaction_id: string,
      public platform_transaction_id: number,
      public status: string,
      public amount: string,
      public transaction_type: string,
      public channel: string,   
      public service_name: string    

    ) {}

    toString(): string {
      return JSON.stringify(this)
    }
  }

service.ts

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/cloudengine-sandbox/cloudsandboxbackend/public/api/cloudsubscriptions";

@Injectable({
  providedIn: 'root'
})
export class CloudsubscriptionsService {

  constructor(private http: HttpClient) { }

  getCloudsubscriptions (): Observable<Cloudsubscriptions[]> {
    return this.http.get<Cloudsubscriptions[]>(apiUrl)
      .pipe(
        tap(cloudsubscriptions => console.log('Fetch Cloud subscriptions')),
        catchError(this.handleError('getCloudsubscriptions', []))
      );
  }

  getCloudsubscription(id: number): Observable<Cloudsubscriptions> {
    const url = `${apiUrl}/${id}`;
    return this.http.get<Cloudsubscriptions>(url).pipe(
      tap(_ => console.log(`fetched Cloudsubscription id=${id}`)),
      catchError(this.handleError<Cloudsubscriptions>(`getCloudsubscription id=${id}`))
    );
  }

component.ts

export class PremiumSmsProductListComponent implements OnInit {

  displayedColumns: string[] = ['msisdn','is_subscribe','package_id','status','amount','channel','service_name'];
  data: Cloudsubscriptions[] = [];
  isLoadingResults = true;    

  constructor(private api: CloudsubscriptionsService) { }

  ngOnInit() {

    this.api.getCloudsubscriptions()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });

component.html

                <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover table-striped table-condesed">
                    <thead>
                    <tr>
                      <th width="5%">#</th>
                      <th>MSISDN</th>
                      <th>Subscribe</th>
                      <th>Package</th>
                      <th>Status</th>   
                      <th>Amount</th>
                      <th>Channel</th>    
                      <th>Service Name</th>                                      
                      <th>Actions</th>                   
                    </tr>
                    </thead>
                    <tbody>
                      <tr  *ngFor="let datas of data| filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
                        <td>{{i + 1}}</td>
                        <td>{{datas.msisdn}}</td>
                        <td>{{datas.is_subscribe}}</td>
                        <td>{{datas.package_id}}</td>
                        <td>{{datas.status}}</td>  
                        <td>{{datas.amount}}</td>  
                        <td>{{datas.status}}</td>  
                        <td>{{datas.amount}}</td>                                          
                      <td>
                          <!-- <button class="btn btn-info" (click)="updateService(service)">Edit</button> -->
                          <button class="btn btn-info" routerLink="/cloudsubscriptionsupdate/{{channel}}">Edit</button>
                          <button class="btn btn-danger" (click)="deleteCloudsubscription(service)" style="margin-left: 20px;"> Delete</button>
                      </td>                                  
                    </tr>
                    </tbody>

                  </table>
                  <pagination-controls (pageChange)="p = $event"></pagination-controls>
                </div>

我想要

{{datas.is_subscribe}}

在1时为True，在0时为False

Answer 1

假设其角度为2，您可以为此使用三元运算符

{{datas.is_subscribe === 1 ? 'True' : 'False'}}

Answer 2

{{datas.is_subscribe === 1 ? 'True' : 'False'}} 或使用逻辑创建管道“ MyPipe”并将其添加到模板中 {{datas.is_subscribe | myPipe}}

如何在Angular中显示Yes / No而不是1/0

2 个答案: